shadcn.io is not affiliated with official shadcn/ui
Support Ticket Response Time Success Block for React Aria
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
Installation
Overview
Say when to expect an answer, and give people something to read until then, with this confirmation page for React with React Aria. It is the Medlar Help page after a customer sends a ticket, a whole screen with the page's rails and one band across it, split by a divider. The first half holds a check in a muted tile, the heading, a stub with the ticket number and a Copy Button, the subject, category, priority and sent time, and the one primary, the Shine Button View my tickets, pinned to the foot of a phone's screen. The second is a bar over four hours with three marks, Received, Assigned within 30 minutes and First reply within 4 hours, each with the time it falls due, and three help articles. The corners and rules are Guides. For help desks, order tools and any form that promises an answer.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent: no ticket exists. The number, subject and times are typed constants, and Copy really copies the number. To wire it, take the number and the times from the created ticket, show the service level for the customer's plan, and list articles chosen from the subject.
Where do the times come from?
From one typed minute, 14:05 UTC, plus the offsets of each mark (0, 30 and 240 minutes). Nothing reads the visitor's clock, so the page reads the same everywhere. The bar is drawn from the same offsets, so the marks and the list cannot disagree.
Is the bar only a picture?
It is hidden from assistive technology, because the list under it carries the same three marks as text with their times. The bar uses weights of the foreground colour: a filled node for what has happened, hollow nodes for what is promised.
How does Copy announce itself?
The button has the name "Copy ticket number" and the number. After a press the page's live line says the number was copied, and if the clipboard refuses, the button announces that it could not copy.