feat: Add 5-star rating system for tea varieties

- Add star rating component (5 stars) to tea form
- Add rating field to tea data model (default: 3)
- Update addTea() to include rating
- Update openTeaModal() to set rating when editing
- Display rating on tea cards with star icons
- Add renderStarRating() for interactive rating in form
- Add renderStarRatingStatic() for display on cards
- Add handleStarRatingClick() for user interaction
- Add migration for existing teas without rating
- Add CSS styles for rating display and interaction

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
Vibe Nuage Agent
2026-06-04 17:00:50 +00:00
parent 394480c516
commit ac12cc5cab
3 changed files with 111 additions and 3 deletions

View File

@ -971,3 +971,45 @@ header p {
z-index: -1;
pointer-events: none;
}
/* Star Rating */
.star-rating {
display: flex;
gap: 5px;
font-size: 1.5rem;
cursor: pointer;
margin-top: 5px;
}
.star-rating .star {
color: #ccc;
transition: color 0.2s;
}
.star-rating .star:hover,
.star-rating .star.active {
color: #FFD700;
}
.star-rating .star:hover ~ .star {
color: #ccc;
}
/* Rating display on tea cards */
.rating-display {
color: #FFD700;
font-size: 0.9rem;
margin-left: 5px;
}
/* Rating display on tea cards */
.tea-rating-display {
display: inline-block;
margin-left: 8px;
font-size: 0.9rem;
}
.tea-rating-display .star {
color: #FFD700;
font-size: 1rem;
}