Star Rating

Build a star rating: a row of stars where clicking sets the rating and hovering previews it. Filled stars show the value. The whole component runs on two numbers — the committed rating and the hovered star — and a single rule: a star is filled when its position is at or below whichever of those is active.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Five clickable stars plus an "n/5" label.

Examples

rating = 3, no hover   → ★★★☆☆   (committed value)
hover over star 4      → ★★★★☆   (preview, rating unchanged)
move pointer away      → ★★★☆☆   (back to committed)
click star 4           → rating = 4 → ★★★★☆

Notes

• Two numbers. rating (committed) and hover (transient, 0 = none).
• Filled rule. Star i is filled when i <= (hover || rating) — hover wins when present.
• Reset on leave. mouseleave on the row sets hover = 0 so the committed rating shows again.
• Out of scope. Half-stars, keyboard arrows, read-only mode — whole-star click + hover here.