Product Rating Heatmap

Requirements:

• Display a grid of products with color-coded ratings (1-5 stars)
• Use color intensity to represent rating levels (red for low, green for high)
• Show product name and rating on each grid item
• Include hover effects for better user experience
• Add modal that opens when clicking a product
• Display detailed product stats in the modal (rating, reviews, price, description)
• Include close button and backdrop click to close modal
• Use proper accessibility attributes for screen readers
• Implement responsive grid layout for different screen sizes

Elements and Attributes for Testing:

• Product Grid - Must have data-testid="product-grid" for testing
• Product Items - Must have data-testid="product-item" and onClick handler
• Modal - Must have data-testid="product-modal" for testing
• Close Button - Must contain text "Close" and have onClick handler
• Product Data - Must display product name, rating, and price
• Color Coding - Products must have different background colors based on rating
• Modal Content - Must show detailed product information when opened