shadcn.io is not affiliated with official shadcn/ui
Heatmap Activity Reviews Block for Solid
A sixteen-week calendar of review counts for a fitness band: each day a shaded button, and picking one lists that day's reviews as articles beside totals and the busiest day.
Installation
Overview
A review calendar for Solid with Ark UI, for the Lynxmoor Band, a fictional fitness band. A header counts the reviews (derived from the 34 typed ones), then a split behind a divider. At the start, sixteen weeks of days as squares, a column for each week and a row for each weekday, every square a button shaded in five steps by how many reviews were posted that day (0, 1, 2, 3, or 4 or more, in solid tones of your text colour with the count printed in the square) and a key under it; below the calendar a list of facts gives the total, the days that had a review and the busiest day. The busiest day starts picked. At the end, a panel reads "4 reviews on 14 Jul" and lists that day's reviews as articles, each with stars, title, text, reviewer and, when the order matched, a "Verified purchase" mark. Pick a day with the pointer, or move with the arrow keys: up and down step a day, the start and end arrows step a week. On a phone the calendar scrolls sideways above the panel. It's built from Rating, Avatar and Guides, with native buttons and CSS transitions only.
FAQ
How do I use my own reviews?
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.
How is the shading chosen?
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.
How does the keyboard work?
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.
What if I pick a day with no reviews?
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.