shadcn.io is not affiliated with official shadcn/ui
Comments by Date View Block for Ark UI
Jump to any day of a team journal by typing a date or choosing one of the twelve days with comments, step between those days, and read that day's thread.
Installation
Overview
Let people open a discussion by date, with this comments-by-day view for React with Ark UI. A compact header names the journal and a hairline frame has three bands. The first is the jump band: a native date Input, a Native Select of the twelve days that have comments, grouped by month with each day's count, and three buttons: Previous day with comments, Next day with comments and Today. The second names the chosen day and counts its comments. The third is a held scroll region with that day's comments, each with an initials Avatar, the entry it is on and its time. A date with nothing, typed or chosen, shows an Empty state that names the day and offers the nearest days that do have comments as two buttons. No month grid is drawn; the calendar blocks do that. A polite status line says what is showing. It is built from Input, Native Select, Button, Empty, Avatar, Badge and Guides, with a CSS entrance only. For team journals, changelog discussions and any thread people remember by date.
FAQ
How do I fill it with my own journal?
Edit PEOPLE and REMARKS (an id, an ISO at timestamp, who wrote it, the entry it is on and the body). The days with comments, the month groups in the select, the counts and the nearest-day buttons are all worked out from those timestamps, so nothing else needs typing. AS_OF is the date that Today returns to.
How do Previous and Next skip empty days?
They look through the sorted list of days that have comments and jump to the closest earlier or later one. When there is none the button stays where it is, marked unavailable, and does nothing. From a day with no comments, typed in the date field, they go to the nearest day on either side.
What happens on a day with no comments?
The thread region keeps its height and shows an empty state with the date in words and two buttons for the nearest days with comments, for example 9 Oct with 3 comments. Clearing the date field shows a prompt to pick a date and offers the days nearest to the demo's today.
What stays local?
Everything. The comments are typed in the file and the chosen date lives in the page. To make it real, load the day's comments when the date changes and ask the server for the list of days that have comments, with their counts, for the select and the two step buttons. The status line already names what is showing for a screen reader.
Is it accessible?
The date field and the select have visible labels, the step buttons say what they do in words and stay focusable when there is nothing to step to, and the thread is a labelled scroll region you can reach with Tab. Times are real time elements in UTC, names and counts are isolated for right-to-left text, and the polite status line names the chosen day and its count.