Waitlist Signup Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the launch 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 Join the waitlist 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 WaitFields component and share the block's state, so an address 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.

It is typed in the file: number 1,284 of 4,000, the same for every address, and nothing in it is worked out from your clock or from what you type. The strip is drawn from those numbers: 40 dots of about a hundred people, so the first 12 are filled, the 13th, which holds places 1,201 to 1,300, is ringed, and the rest are empty. The turn line divides the position by the invite rate (about 250 a week) and rounds up, so it reads about 6 weeks. In your app return the real position and the real rate from your API when the address is added.

The form and the result sit in one grid cell, and the one you are not looking at is inert and invisible, so the dialog is always as tall as the taller of the two. The form keeps its strip of empty dots at the foot so the space is used, and when you join, focus moves to your place so a screen reader reads it at once.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the email field, and Escape, Cancel, Done and the close button return focus to the header button. A wrong address is checked when you leave the field and again on Join, named in words under the field and focused. The queue strip is a single image with a sentence, not 40 stops, the polite status line says your place and your turn once, and the header button keeps its place in the tab order after you join: pressing it says where you stand. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

Yes. The browser's clipboard is real, so pressing Copy puts your link on it, the button reads Copied for three seconds and the status line says so. If the browser refuses, an alert in the same place asks you to select the link and copy it by hand. The link is typed in the file and points nowhere.

Everything but the clipboard. Nobody is added to anything and no email is sent: joining only changes this block's state and the drawn page. In your app send the address to your server on submit, answer with the position and a personal link, send a confirmation email, and make the link credit the friend who shared it.