Star Rating

1import * as React from "react";
2import { Star } from "lucide-react";
3import { cn } from "@/lib/utils";
4 
5interface StarRatingProps extends React.HTMLAttributes<HTMLDivElement> {
6  rating: number;
7  max?: number;
8  label?: string;
9}
10 
11function StarRating({ className, label, max = 5, rating, ...props }: StarRatingProps) {
12  return (
13    <div
14      className={cn("flex items-center gap-0.5 text-warning-icon", className)}
15      aria-label={label ?? `${rating} out of ${max} stars`}
16      {...props}
17    >
18      {Array.from({ length: max }, (_, index) => (
19        <Star
20          key={index}
21          className={cn(
22            "size-3.5",
23            index < Math.round(rating) ? "fill-current" : "fill-transparent text-border",
24          )}
25          aria-hidden="true"
26        />
27      ))}
28    </div>
29  );
30}
31 
32export { StarRating };
33export type { StarRatingProps };