gpatruno
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
type Props = {
|
|
rating: number;
|
|
size?: "sm" | "md";
|
|
};
|
|
|
|
function StarIcon({ filled }: { filled: boolean }) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
aria-hidden
|
|
className={`h-[1em] w-[1em] ${filled ? "text-gaufre" : "text-chocolat/20"}`}
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ReviewStars({ rating, size = "md" }: Props) {
|
|
const rounded = Math.round(rating);
|
|
const sizeClass = size === "sm" ? "text-sm" : "text-base";
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-0.5 ${sizeClass}`}
|
|
aria-label={`${rating.toFixed(1).replace(".", ",")} sur 5`}
|
|
>
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<StarIcon key={i} filled={i < rounded} />
|
|
))}
|
|
</span>
|
|
);
|
|
}
|