Social Links Settings Block for React

A small pure function reads the address you type or paste. It accepts the address with or without https:// and www., looks up the host in SERVICES (GitHub, GitLab, LinkedIn, YouTube and Dribbble), and tests the path against that service's handle shape: github.com/handle, linkedin.com/in/handle, youtube.com/@handle. A host it doesn't know becomes a Website, and its tile and name follow the address as you edit it. Add a service by adding an entry with its host, path prefix, handle pattern and two-letter mark. Nothing is looked up on the network: whether a profile exists is for your server to check.

An empty field, an address with spaces, text that isn't a web address, http instead of https, and a known service whose path doesn't fit its shape ("LinkedIn links look like linkedin.com/in/handle."). The message sits under the row's input in a place reserved for it, so a message never moves the rows, and the input is marked invalid. Save refuses while any row has a problem, says how many links need fixing, and puts focus on the first one.

Each row has a Move up and a Move down button named for its link, such as "Move GitHub up". The one at an end stays in place and focusable but doesn't act, and says so; after a move focus stays on the button you pressed, and the polite status line says the new place, "GitHub moved to place 2 of 4." The rows keep their positions and their content changes, so nothing jumps while you reorder. There is no drag handle: a dragged order has to be reachable by keyboard anyway, and these buttons are that route.

Undo walks back the last five adds, moves and removals, one step per press; its name says which step ("Undo removing GitHub"). Typing in an address isn't a step, but Discard puts everything back as it was when last saved. Save keeps the edited list as the saved one, in this page only, and says how many changes it kept; it also clears the Undo steps. Both Save and Discard stay in place and focusable while nothing changed, and answer "No changes to save." instead of disappearing.

Everything. The handles are made up, the preview chips are plain text rather than links, and Save only copies the list into the page's own state. To make it real, send the saved list (each link's address, whether it shows and its position) to your API in the save handler, and render the page's links from the same list. Keep the check on the server too: the pattern here is a courtesy to the person typing, not a guarantee.

Every input is labelled by its service, every switch reads "Show GitHub on your page", and every button names its link. The status line is a polite live region that is present from the start; it says what changed and counts what isn't saved. The five places always take the same height, filled or free, so adding and removing never move the panel. Below the small breakpoint a place becomes a card: the tile and name with the switch, the address, then the problem beside the three buttons; the save bar stays pinned to the bottom of the screen.