// src/components/StarRating/StarRating.tsx "use client"; import styles from "./StarRating.module.css"; export type StarRatingProps = { /** 0-5; halves render half-fills. Display rounds to halves. */ value: number; /** Present = interactive (user rating); stars become radio buttons. */ onChange?: (value: number) => void; label?: string; }; const STAR_PATH = "M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1.1 5.8L10 14.8l-5.3 2.8 1.1-5.8L1.5 7.7l5.9-.8z"; /* Filled states carry no outline — at 20px, outlined arms read as solid. * Half = muted base star + colored left half on top, like the Figma block. */ function Star({ fill, active }: { fill: "empty" | "half" | "full"; active: boolean }) { const cls = [styles.star, active ? styles.active : styles.display, styles[fill]].join(" "); return ( ); } export function StarRating({ value, onChange, label = "Rating" }: StarRatingProps) { const stars = [1, 2, 3, 4, 5].map((i) => { const fill = value >= i ? "full" : value >= i - 0.5 ? "half" : "empty"; return { i, fill: fill as "empty" | "half" | "full" }; }); if (!onChange) { return ( {stars.map((s) => ( ))} ); } return ( {stars.map((s) => ( ))} ); }