Heatmap Calendar

Build a GitHub-style contribution heatmap in React. Eighty-four days sit in a grid of 7 rows (days of the week) and 12 columns (weeks); each day cell is shaded by an activity level from 0 to 4, and hovering a cell writes that day's count into a status line below the grid.

What you'll build

The starter App.tsx already builds the days array and renders the coloured grid, the legend, and a Hover a day status. Make it interactive:

1. Hold the hovered day. Track a hovered index with useState<number | null>(null).
2. Record it on hover. Add onMouseEnter={() => setHovered(d.i)} to each cell.
3. Derive the status. When hovered is set, show count contributions — day i for that day; otherwise show Hover a day.

Examples

• The page loads with all 84 cells shaded by level, a Less to More legend on the right, and Hover a day underneath.
• Moving the pointer onto the 46th cell (index 45) shows 3 contributions — day 45.
• Moving to another cell updates the line to that day's count. The colours never change — only the status does.

Notes

• The data is deterministic. level = (i * 3 + (i % 7)) % 5 and count = level * 2 + (i % 3) — no Math.random, so the picture is stable on every render. Build the array once, outside the component.
• One flat array, a CSS grid. The layout is pure CSS: 7 explicit rows plus grid-auto-flow: column fills the array column by column. You never compute x/y positions.
• Colour is derived from level, not stored. Each cell's class is cell l${level}; the five .l0–.l4 shades live in styles.css.
• Styling is already in styles.css; focus on the hover state.