Heatmap Activity Reviews Block for React

Replace REVIEWS at the top of the file, oldest first. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body and verified. Set FIRST to the Monday of the first week and AS_OF to the last day shown; the squares, the counts, the shading, the facts and the busiest day are all derived. Change WEEKS and the grid's column count together if you want a different span.

By the day's count, capped at four: no reviews is the faintest tone, one is a little darker, and so on up to your text colour at full strength for four or more. Each step is a solid mix with the page background, never a transparent tint, and the number is printed in every square that has one so the shading is never the only signal. A key under the calendar names the five steps.

The calendar is one tab stop: the picked day. The up and down arrows move to the previous and next day, the arrows toward the start and the end move a week back and forward, Enter or Space picks the focused day, and picking is immediate, so the panel updates as you move. A polite line above the list says "3 reviews on 18 Aug". The list panel itself is a labelled region you can scroll by keyboard.

The line says "No reviews on 3 Jul" and the panel says nobody wrote one that day. Its height does not change: on a wide screen the panel is as tall as the calendar and scrolls inside, and on a phone it has a fixed height.

The calendar keeps its sixteen columns at a touch-friendly size inside a sideways scroller, with the key and the facts under it, and the panel sits below, 24 rem tall with its own scroll. The page itself never scrolls sideways.

The calendar keeps its left-to-right order because time runs that way, so the weeks still read forward; the facts, the panel and the review articles follow the page's direction, and each date and count phrase is isolated.