303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import { Star } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface StarRatingProps {
|
|
value: number
|
|
onChange?: (value: number) => void
|
|
readonly?: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
showCount?: boolean
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: 'h-4 w-4',
|
|
md: 'h-5 w-5',
|
|
lg: 'h-6 w-6'
|
|
}
|
|
|
|
export function StarRating({
|
|
value,
|
|
onChange,
|
|
readonly = false,
|
|
size = 'md',
|
|
showCount = false
|
|
}: StarRatingProps) {
|
|
const handleClick = (rating: number) => {
|
|
if (!readonly && onChange) {
|
|
onChange(rating)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
onClick={() => handleClick(star)}
|
|
disabled={readonly}
|
|
className={cn(
|
|
'transition-colors',
|
|
!readonly && 'hover:scale-110 cursor-pointer',
|
|
readonly && 'cursor-default'
|
|
)}
|
|
aria-label={`${star} star${star !== 1 ? 's' : ''}`}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
sizeClasses[size],
|
|
star <= value
|
|
? 'fill-yellow-400 text-yellow-400'
|
|
: 'fill-none text-muted-foreground',
|
|
!readonly && 'hover:text-yellow-300'
|
|
)}
|
|
/>
|
|
</button>
|
|
))}
|
|
{showCount && (
|
|
<span className="ml-1 text-sm text-muted-foreground">
|
|
({value}/5)
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|