shadcn.io is not affiliated with official shadcn/ui
Comments Disabled Error Block for React
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 Base 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.
Related
- Pro
Removed Post Review Error
Locked and removedA page for a removed forum post: the post with its words under black bars except the phrase that broke a rule, underlined and named, then a field and one button to request a review that shows what a real review would do, and the case details.
- Pro
Read-Only Document Error
Locked and removedA full-screen read-only page for a document editor: a drawn page with a lock above a table of six actions (allowed or not, and the role each needs), Request edit access that opens a message to the owner in place, and Open in read mode.
- Pro
Role Ladder Permission Denied Error
Locked and removedA full-screen permission page for a design-system manager: a role ladder of four rising steps with you at Viewer and Admin marked as needed, 'Two roles up' in words, and a Request access dialog that records a note and an owner in local state.
- Pro
Archived Project Restore Error
Locked and removedA page for an archived project: four cells for when and by whom it was archived, how many people worked on it and how many days it sat quiet, a retention meter with the months that remain, one button to restore it, a real archive download and a link to active projects.
- 43Pro
403 Forbidden Error
Locked and removedA full-screen 403 page for a team wiki: a door drawn as the zero of 403, the heading 'Ask someone who can say yes', the three workspace admins in a framed list with a Copy email button each, and a way back to the wiki.
- Pro
Account Deleted Error
Locked and removedA full-screen page for someone who signs in to a deleted account: three facts on shared hairlines and two choice cells that spell out what recovering and starting fresh each mean, with a Shine Button that follows the choice.