shadcn.io is not affiliated with official shadcn/ui
Heat Map Comments Block for Radix UI
A drawn document of eight paragraphs shaded by how many comments each has, a radio group to choose one and read its comments, and hot spot buttons that walk the ranking.
Installation
Overview
See where readers talk, with this document heat map for React with Radix UI. A compact header names the idea. The frame has two cells. One is a drawn document: a title and eight paragraph rows, each with a typed line, a drawn body, a bar shaded in one of five solid steps by its number of comments, and the number itself, so shade is never the only signal. The rows are a native radio group, so the arrow keys move between paragraphs. The other cell lists the comments for the paragraph you chose ("7 comments on paragraph 4") in a held region; a paragraph with none shows an empty state in the same space, with a way back to the most discussed one. "Most discussed: paragraph 4 (7)" is worked out from the comments, and Previous and Next hot spot walk the ranking. On a phone the document comes first and the comments follow it. It is built from native radios, Button, Avatar, Empty and Guides, with a CSS entrance only. For document review, editorial tools and any place where comments attach to parts of a page.
FAQ
How do I use my own document?
Edit PARAGRAPHS (one line each) and LINES (the paragraph number, the person, an ISO time and the words, separated by a pipe). Counts, the shading, the ranking and the sentence "Most discussed" are worked out from those lines. Keep words free of the pipe character, or switch to an array of objects.
How is the shading chosen?
levelOf maps a comment count to one of five steps (none, 1 to 2, 3 to 4, 5 to 6, 7 or more) and LEVELS holds a solid mix of the foreground colour for each. Because the number is printed at the end of every row and spoken as "7 comments", the bar can be subtle without hiding anything. Change the thresholds to fit your data.
What do the hot spot buttons do?
They move the selection along the ranking of paragraphs that have comments, most discussed first. Previous goes one place hotter and Next one place cooler, and at either end the button stays and says so. From a paragraph with no comments, Next goes to the most discussed and Previous to the least.
What stays local?
The selected paragraph. The comments are typed and nothing is saved or sent. To make it real, attach each comment to a paragraph id in your document model, count them on the server per revision, and decide what happens to a comment when its paragraph is edited or moved.
Is it accessible?
The paragraphs are a labelled radio group, and each says its comment count and whether it is selected. The comments are a labelled scroll region reachable with Tab. The drawn body lines are hidden from assistive technology, the shading has a number beside it, and a polite status line announces each choice.