Add Profile Dialog Block for React

So you can see it without a click. On load the dialog 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 Add writer 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 WriterFields component and share the block's state, so what you typed in the copy is there 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.

The byline as the issue prints it: "By" and the name, a comma and what they write, with the mark in a round tile and the first lines of the bio under it. Empty fields show "By your name" and a placeholder line, so the card never collapses. On a phone it is a single row above the form with the bio left out, so the form stays on the first screen.

Seven native radios under the byline card: six glyphs drawn as icons and Initials, which shows the first letters of the name as you type. The arrow keys move the choice, the name of the chosen one sits beside the label and the byline card follows. Choosing a picture file is a different feature, and this block has no file input. In your app add one as another option and keep the glyphs for writers who don't want a photo.

The visible number counts the trimmed text against 120 and is hidden from screen readers; what they hear is said 600 ms after you stop typing, at 20 and 10 characters to go, at none and when over. Going over keeps the dialog open on Add profile, says how many characters to cut under the field and puts focus in it. A name that is empty or already on the page is refused the same way.

All of it. The three writers on the page are typed constants, and Add profile only raises the drawn count, prints the byline when the switch is on and says in a polite message that nothing was saved. In your app post the fields from add, add the writer from the response and let your server be the judge of duplicates.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the name and stays inside until it closes, and Escape, Cancel and the close button return focus to Add writer. 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, Cancel and its close button close it and put focus on the button.