Split Panel Address Bar CTA Block for React

From a short list: TAKEN at the top of the file holds the names that count as taken, and verdictFor compares the typed name with it, so the answer is instant and nothing is sent anywhere. In a real product, replace the lookup with a request to your server, show the line "Checking…" while it runs and debounce it as the visitor types, and still check again when they claim, because someone else may take the name in between.

Lower-case letters, digits and hyphens, from 3 to 24 characters, with no hyphen at either end. The field cleans what is typed or pasted as it arrives, so capitals and spaces never show up in the bar; the rules are MIN_LENGTH, MAX_LENGTH and the clean function, and the line under the window explains any name that falls short.

The input is a real text field with a hidden label ("Your address, without harbor.site"), described by the status line, which is a polite live region, so each result is read when it changes. The tab strip and the miniature page are decorative: they are hidden from assistive technology and can't take focus. The "https://" and domain text beside the input is part of the field's look, and the label says the domain is not part of what is typed.

Nothing but link: it's a Shine Button link with href="#" that you point at your sign-up page, ideally with the chosen name in the query string. It is a link only when the name is available; otherwise it is a disabled button, and the line above it says why. To reserve the name before sign-up, call your API from a click handler and keep the same two states.

Below the large breakpoint the panels stack, copy first. To keep the Shine Button on the first screen, the three points and the miniature page are shown from the sm breakpoint up: a phone keeps the tab and the address bar, the availability line and the button. The "https://" text is hidden below sm so the field keeps its width, and long names truncate in the tab instead of overflowing.

The panels and the browser chrome mirror, but the address bar keeps its left-to-right order, because web addresses are written that way in every language: "https://", the name and the domain stay in sequence.