shadcn.io is not affiliated with official shadcn/ui
Future-Dated Comments Block for React Aria
Embargoed release comments with a 14-day slider that shows readers the thread on any date, redaction bars over the words until their unlock time, and a Show scheduled to me switch for the author's view.
Installation
Overview
Hold a comment until its day, with these future-dated comments for React with React Aria. A compact header names the thread in Embargby, a release communications tool, and holds a Show scheduled to me Switch. The frame opens with a Slider across fourteen days from Wed 14 Oct, with a tick under every day a comment unlocks and a date label on each day (every third on a phone). Below it four comments are each Visible or Embargoed until a typed date and time, their words behind Redact Text bars until the thumb passes that day, and the heading counts them: 3 of 4 visible on 16 Oct. The switch is the author's view: every text shows and the embargoed ones are marked Scheduled. It is built from Slider, Redact Text, Switch, Badge, Avatar and Guides, with CSS only. For release notes, announcements, press embargoes and any comment that should appear later.
FAQ
How do I change the dates and the comments?
Edit LIST: each comment has a day (days after the fixed AS_OF date, Wed 14 Oct) and an hour it unlocks, and SPAN is the number of days the slider covers. The ticks, the labels, the badge text and the count are all worked out from those, so there is nothing to keep in step.
What does Visible on a date mean?
A comment counts as visible on a day if it unlocks on or before that day, so the comment that unlocks on Fri 16 Oct at 09:00 is visible when the thumb is on 16 Oct. The slider shows the thread as readers would see it by the end of that day.
Is the embargoed text really protected?
No: this is a demo of the rule. The words are in the page under the bars, so anyone can read them with the browser's tools. In your app the server must not send an embargoed comment's text before its time, and should send a placeholder instead. The redaction bars are a way to show that a comment exists and is waiting.
What stays local?
All of it: nothing is published, scheduled or sent, and moving the slider or the switch only changes what this page draws. The status line says so. To make it real, store the unlock time with each comment and have the server decide what each reader may see.
Is it accessible?
The slider is named, steps one day at a time with the arrow keys and reads its value as a date; the heard result is written once you let go, not on every step. Embargoed comments say so in words with a lock icon, their text is announced as Embargoed text until it unlocks, and each comment has a hidden line with its unlock time. The tick marks and date labels are decorative.