Riccardo Giorato
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Check } from "lucide-react"
|
|
import { Label } from "@/components/ui/label"
|
|
|
|
const COMIC_STYLES = [
|
|
{ id: "american-modern", name: "American Modern" },
|
|
{ id: "manga", name: "Manga" },
|
|
{ id: "noir", name: "Noir" },
|
|
{ id: "vintage", name: "Vintage" },
|
|
]
|
|
|
|
export function StyleSelector() {
|
|
const [selectedStyle, setSelectedStyle] = useState("noir")
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<Label className="text-base font-semibold font-display">Choose Your Style</Label>
|
|
|
|
{/* Grid for style selection */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{COMIC_STYLES.map((style) => (
|
|
<button
|
|
key={style.id}
|
|
onClick={() => setSelectedStyle(style.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"
|
|
}
|
|
`}
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
{selectedStyle === style.id && (
|
|
<div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
|
|
<Check className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|