Add loading state and style constants, enhance API key modal with delete

components/landing/style-selector.tsx

@@ -1,18 +1,15 @@
 "use client"
 
-import { useState } from "react"
 import { Check } from "lucide-react"
 import { Label } from "@/components/ui/label"
+import { COMIC_STYLES } from "@/lib/constants"
 
-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-]
+interface StyleSelectorProps {
+  style: string
+  setStyle: (style: string) => void
+}
 
-export function StyleSelector() {
-  const [selectedStyle, setSelectedStyle] = useState("noir")
+export function StyleSelector({ style, setStyle }: StyleSelectorProps) {
 
   return (
     <div className="space-y-3">
@@ -20,28 +17,30 @@ export function StyleSelector() {
 
       {/* Grid for style selection */}
       <div className="grid grid-cols-2 gap-3">
-        {COMIC_STYLES.map((style) => (
+        {COMIC_STYLES.map((styleOption) => (
           <button
-            key={style.id}
-            onClick={() => setSelectedStyle(style.id)}
+            key={styleOption.id}
+            onClick={() => setStyle(styleOption.id)}
             className={`
               relative text-left transition-all duration-200 rounded-lg p-3.5 border-2 group
               hover:scale-[1.02] active:scale-[0.98]
               ${
-                selectedStyle === style.id
-                  ? "border-primary bg-primary/5 shadow-sm"
-                  : "border-border hover:border-primary/30 bg-card hover:bg-muted/50"
+                style === styleOption.id
+                  ? "border-indigo bg-indigo shadow-md"
+                  : "border-border hover:border-indigo/50 bg-card hover:bg-muted/20"
               }
             `}
           >
             <div className="flex items-start justify-between gap-2">
               <div>
                 <div className="flex items-center gap-2">
-                  <h3 className="font-semibold text-sm text-foreground font-display">{style.name}</h3>
+                  <h3 className={`font-semibold text-sm font-display ${
+                    style === styleOption.id ? "text-white" : "text-foreground"
+                  }`}>{styleOption.name}</h3>
                 </div>
               </div>
-              {selectedStyle === style.id && (
-                <div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
+              {style === styleOption.id && (
+                <div className="bg-white text-indigo p-1 rounded-full shrink-0">
                   <Check className="w-3 h-3" />
                 </div>
               )}