Referral Invite Sheet Block for React

So you can see it without a click. On load the sheet 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 header button opens the real Sheet, modal, with its focus trap, Escape and focus return, from the end edge in either reading direction, and the copy stays closed until a reload. Both show the same ReferralFields component and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Because the page cannot know that one is set up, and a link that opens nothing is worse than none. So the sheet writes the message itself: the To line comes from the address you typed, the subject and the body carry your code and your link, and Copy message puts all of it on your clipboard to paste into whatever you use. The invited count goes up by one, on the sheet and on the drawn page, and says it was only written in this demo. In your app send the invite from your server, with your own mail provider, to an address the friend gave you permission to use.

Yes. The browser's clipboard is real, so Copy code, Copy link and Copy message each put their text on it, the button reads Copied for three seconds and the status line says which. If the browser refuses, an alert says so and asks you to select the text and copy it by hand. The code and the link are typed in the file and point nowhere.

From two typed numbers: how many friends have joined (2) and what each step needs (1, 2 and 4 friends). A step with enough friends is filled with a check and says Reached; the others say how many friends to go. The credit is joined friends times $10, so $20, and the figures and the drawn page read the same numbers. In your app read the friends and the credit from your API after each order.

Yes. The real sheet is named by its title and described by its sentence, focus starts on Copy code, and Escape and the close button return focus to the header button. Every button is named by what it copies, a wrong address is checked when you leave the field and again on Write the email and is named in words under it, and what changes is spoken once in a polite status line (inside the sheet while it is open). The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its button pinned and the content scrolling above it: the code and link first, then the email, the message, the ladder and the figures. The real sheet is full width on a phone, with the same order.