tsx
35 lines
856 Bytes
| 1 | export function FiveStarRating({ rating }: { rating: number }) { |
| 2 | return ( |
| 3 | <div className="flex items-center gap-1"> |
| 4 | {[...Array(5)].map((_, i) => |
| 5 | i < rating ? ( |
| 6 | <StarIcon key={i} className="w-5 h-5 fill-black" /> |
| 7 | ) : ( |
| 8 | <StarIcon |
| 9 | key={i} |
| 10 | className="w-5 h-5 fill-muted stroke-muted-foreground" |
| 11 | /> |
| 12 | ) |
| 13 | )} |
| 14 | </div> |
| 15 | ); |
| 16 | } |
| 17 | |
| 18 | function StarIcon(props: any) { |
| 19 | return ( |
| 20 | <svg |
| 21 | {...props} |
| 22 | xmlns="http://www.w3.org/2000/svg" |
| 23 | width="24" |
| 24 | height="24" |
| 25 | viewBox="0 0 24 24" |
| 26 | fill="none" |
| 27 | stroke="currentColor" |
| 28 | strokeWidth="2" |
| 29 | strokeLinecap="round" |
| 30 | strokeLinejoin="round" |
| 31 | > |
| 32 | <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /> |
| 33 | </svg> |
| 34 | ); |
| 35 | } |