index.tsx raw

   1  import { cn } from '@/lib/utils'
   2  import { Star } from 'lucide-react'
   3  import { useMemo } from 'react'
   4  
   5  export default function Stars({ stars, className }: { stars: number; className?: string }) {
   6    const roundedStars = useMemo(() => Math.round(stars), [stars])
   7  
   8    return (
   9      <div className={cn('flex items-center gap-1', className)}>
  10        {Array.from({ length: 5 }).map((_, index) =>
  11          index < roundedStars ? (
  12            <Star key={index} className="size-4 text-foreground fill-foreground" />
  13          ) : (
  14            <Star key={index} className="size-4 text-muted-foreground" />
  15          )
  16        )}
  17      </div>
  18    )
  19  }
  20