Copy-Ready Speaker Bio Profile Block for React Aria

Replace the three text strings in BIOS and the talks in TALKS. The number on each length button is counted from the text with a whitespace split, so if you rewrite a bio the label follows. AS_OF is the fixed day the days to go are counted from; set it from the server's date when you wire it up.

By splitting the text on whitespace and counting the pieces, the same way for the buttons, the line above the text and the status message. A hyphenated name or an e-mail address counts as one word, which is how most programmes count too.

Yes. It writes the chosen bio to the clipboard through the browser and says how many words it copied. If the browser refuses (some embeds do), the status line says so and asks you to select the text instead. Nothing leaves the page.

The speaker, the bios and the talks are typed examples, and the days to go are counted from a fixed date, not from the clock. In your own app load the bio from your profile data and keep the three lengths next to each other, so the author controls what each one says.

The length buttons are a named group, the hidden bios are inert so only the chosen one is read, and the status line is a polite live region present from the start. On a phone the talks stack under the bio and the status and the copy button stay pinned to the bottom of the screen. Dates and counts keep their reading order in a right-to-left page.