134. Star Rating

Build an interactive Star Rating component — one of the most common UI elements in e-commerce, review systems, and feedback forms.

Problem

Create a StarRating component that allows users to select a rating by clicking on stars and see a hover preview before committing.

Requirements

1. Display Stars

• Render a configurable number of stars (default: 5)
• Filled stars represent the current rating
• Empty stars represent unselected positions

2. Click to Rate

• Clicking a star sets the rating to that star's position
• Clicking the same star again should reset the rating to 0

3. Hover Preview

• Hovering over a star temporarily highlights all stars up to and including the hovered star
• Moving the cursor away restores the display to the committed rating

4. Accessibility

• Each star must be a <button> (not a <div> or <span>)
• Include an aria-label on each star button (e.g., "Rate 3 out of 5 stars")

5. Display Current Rating

• Show the current numeric rating below the stars (e.g., "Rating: 3 / 5")

Example Usage

// Default 5 stars

<StarRating />

// Custom star count

<StarRating maxStars={10} />

## Real-World Context

This problem models real production features:
- **Product reviews**: Amazon, Yelp, Google Maps rating systems
- **Feedback forms**: NPS scores, satisfaction surveys
- **Content ratings**: Movie/book/restaurant ratings
- **Skill assessments**: Self-evaluation forms in HR tools