40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Star } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import { hapticLight } from "@/lib/haptics"
|
|
|
|
type StarRatingProps = {
|
|
value: number
|
|
onChange: (value: number) => void
|
|
size?: "sm" | "md" | "lg"
|
|
}
|
|
|
|
const iconSizes = { sm: "size-5", md: "size-7", lg: "size-9" }
|
|
const buttonSizes = { sm: "size-8", md: "size-10", lg: "size-11" }
|
|
|
|
export function StarRating({ value, onChange, size = "lg" }: StarRatingProps) {
|
|
return (
|
|
<div className="flex gap-0.5">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
onClick={() => { hapticLight(); onChange(star) }}
|
|
className={cn(
|
|
"flex items-center justify-center rounded-md transition-transform active:scale-90",
|
|
buttonSizes[size],
|
|
)}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
iconSizes[size],
|
|
star <= value
|
|
? "fill-amber-500 text-amber-500 aero-star-filled"
|
|
: "text-muted-foreground/30",
|
|
)}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|