No Followers Empty State Block for React

The handle, the rings and the status live in the page's state and nothing is posted: the profile and its link are the demo's own, and "0 followers" is typed. What is real is what the browser does: the clipboard gets the link when you press either copy button, and the QR code is a real code of that link. To wire it, load the creator's handle and follower count from your API and build the link from the handle.

Lowercase letters, digits and underscores, 3 to 20 of them; anything else is dropped as you type. The link and the QR code follow every valid handle. While the handle is too short the code keeps the last valid link, and the button stays in the tab order and says why instead of doing nothing, with a line under the field and focus back in it.

Yes: it is a real QR code of the https link, drawn in black on white with a quiet margin in every theme and in dark mode, which is what phone cameras need. Its label gives the link, and the link is also printed under it. The demo's host is a placeholder: use your own domain.

The page says so ("Your browser would not copy. Select the link and copy it by hand.") instead of claiming success, and the link is plain text under the code. Copying needs a secure page (https) in most browsers. Both copy buttons run the same code and say the same thing.

The drawn card and its rings are decoration, hidden from assistive technology; the same facts are in the heading, the field and one polite status line. Words on the card are HTML over the drawing. The link, the handle and the card stay left to right in every language, since they are an address and a picture, and the rest follows the page's direction.

The card comes first, 140 px tall, with the heading, the field and the Copy profile link button under it so the button is on the first screen; the code and its link follow. Nothing scrolls sideways at 320 px.