shadcn.io is not affiliated with official shadcn/ui
Last Reviewed FAQ Block for Vue
A FAQ for a returns portal that shows how recently each answer was reviewed, with four dots and words in a mark column, and a switch to keep this quarter's.
Installation
Overview
A FAQ that says how fresh each answer is, for Vue with Ark UI. Five questions sit in hairline rows that run from rail to rail, with a mark column at the end of every row: four small dots filled by how recently the answer was reviewed, and the words beside them. The server renders neutral words; once the page is in the browser they become relative time, such as "Reviewed last month". A switch in the header keeps only the answers reviewed this quarter. There is never a printed date. It's built from Accordion, Switch and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For returns, shipping and policy pages whose answers go out of date.
FAQ
Where do the words come from?
From days on each question, the number of days since it was reviewed. On the server, and on the first paint in the browser, the words are the neutral ones for its level (this month, this quarter, this year, over a year ago), so what the server sends and what hydrates match. Right after, an effect switches them to relative time from Intl.RelativeTimeFormat ("Reviewed 3 days ago", "Reviewed last week"). days is a stand-in: in your app, compute it from the page's real review time, for example Math.floor((Date.now() - reviewedAt) / 86_400_000) inside that effect.
What do the dots mean?
Four filled is reviewed within a month, three within a quarter, two within a year, one is older. The dots are decorative and hidden from assistive technology; the words carry the same meaning as text.
What does the switch do?
Reviewed this quarter keeps the questions reviewed within about three months and hides the rest, with the count in a polite live region ("3 of 5 questions"). The list keeps its height for the full set.
The switch takes checked and onCheckedChange.
Can I change the language of the relative time?
Yes. RELATIVE is created with the "en" locale: pass your page's own, and change the "Reviewed" prefix and the neutral words in bucketWords to match.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3, and its name includes the review words, so a screen reader reads "How long do I have to return something? Reviewed this month". The switch is named "Reviewed this quarter only".
The Up and Down arrows also move between questions, and Home and End jump to the first and last.