shadcn.io is not affiliated with official shadcn/ui
Comments Disabled Error Block for Radix UI
A panel for an essay whose comments are closed: the article's footer drawn in greyscale and three cells of other ways to respond, namely reaction pills, a copyable link and a note to the author, plus a switch to hear if comments reopen.
Installation
Overview
Give readers something to do when the thread is closed, with this comments disabled panel for React with Radix UI. It's what Saltlight Review, a literary magazine, shows under an essay whose comments the editors closed: a compact header over one framed panel on plus-marked corners, made with Guides. The first band is the essay's footer drawn in greyscale (three bars where its last lines were, the byline, and a "Comments are closed" row with the day and how many days ago, counted from typed dates). Under it, three cells on shared hairlines offer other ways to answer: React, three Toggle Group pills with counts that each add one for you; Share, the link in a read-only field with a Copy Button that really copies it; and Message the author, a short note in a Textarea with the one Shine Button, Send message. The last band holds the status line and a Switch, "Tell me if comments reopen". The cells stack on a phone. Nothing is sent or saved. For magazines, blogs and any page that closes a thread.
FAQ
What stays in the page, and how do I wire it?
Everything but the clipboard. A reaction adds one to its count and says so in the status line; pressing it again takes it back. Send message checks the note (ten characters at least), waits under a second, clears the field and says the note was kept in the page and nothing was sent. The Switch only says what a real page would do. To wire it for real, post the reaction from pickReactions, send the note from send, and save the Switch from watch.
Does Copy really copy?
Yes: it writes the essay's link to the clipboard, and the status line says so. If the browser refuses (a page not served over HTTPS, or no permission) the status line says the link could not be copied and the field stays selectable so it can be copied by hand. Nothing else is copied.
Where do the dates come from?
From the typed day the thread was closed and one AS_OF day standing in for today. "Closed 5 days ago" is worked out with UTC day numbers, so it reads the same on the server and in every time zone, and nothing reads the clock. In your app, take the day from the essay's record.
Are the reaction pills accessible?
Yes. They are a labelled group of toggle buttons: Tab reaches the group, the Up and Down arrow keys move between pills and Space or Enter presses one. Each pill's name includes its count ("Moved me, 48 reactions"), the pressed pill is solid foreground and not only a colour change, and the status line announces the change.