Contact Card Dialog Block for React

So you can see it without a click. On load the card is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The View contact card button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ContactCard component and share the block's state, so the person you paged to in the copy is the one in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

A real .vcf file, a vCard 3.0, built from the typed details: the name in both forms, the organisation, the role, the work email, the work phone and a note with the desk and the city. Lines end with CRLF, as the format asks, and the file name is the person's id. Opening it in an address book adds a contact there. Pressing the button also marks the person as saved on the drawn directory and says so in a polite message. In your app build the card from your own record in vcardOf.

They are real links: Email is mailto: with the person's address and Call is tel: with their number, so a mail client or a phone opens when your device has one. Nothing is sent or dialled by the page itself. The phone numbers are in the ranges reserved for fiction, so a real call goes nowhere.

They step round the six people, so the first card follows the last. Focus stays on the button you pressed, a polite message says the new name and "2 of 6", and the card keeps its size whoever it shows. The arrow keys move while focus is anywhere inside the card, except in a field, and follow the reading direction: in a right-to-left page the left arrow is next.

From a fixed instant, AS_OF, shown in each person's time zone with Intl.DateTimeFormat, so "10:40 in Toronto" is the same for everyone whenever they look. It is not your clock. In your app read the current time in clockOf and refresh it on a timer, or say "now" and let the browser format it.

All but the file and the links. The six people are typed constants and nothing is stored or sent; the copy buttons use the clipboard, which needs a page served over HTTPS, and say so if it refuses. In your app load the person from your API, keep the index in the list you are paging, and keep the links and the vCard.

Yes. The real dialog is named by the person's name and described by their role, focus starts inside the card and stays inside until it closes, and Escape and the close button return focus to View contact card. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.