Social Profiles Account Block for React

Edit START for the cards the account has when the page opens: each has an id, a two-letter mark for its neutral tile, a name, the handle as shown, the code to put in the bio and the ISO day it was verified (empty until it is). KINDS lists the networks that can still be added, each with the code its card will show. The count, the profile line and the options in the select are all worked out from the cards, and a network already on the page leaves the select. The tiles are placeholders: drop in logos you have the rights to use.

Nothing is looked up on any network. Check now passes in this demo only once the code has been copied, which is what the line beside it says, and it then marks the card Verified on the fixed as-of day. Adding, removing and Undo only change this page's state, and every result says so in the status line. To wire it, generate one code per handle on your server, fetch the profile's bio or a post in check, look for the code, and mark the handle verified only when it is there; revoke the mark when the handle changes.

The page needs some honest rule to decide, and the real one (read the bio) can't run here. Copying the code with the button stands in for putting it in the bio. If the clipboard refuses, the button shows its cross and the check keeps refusing, with the code still on screen to select by hand. The refusal is shown beside the button and in the status line, never as an error that hides the card.

Pick a network and type a handle; an empty one or one with characters a handle can't have is refused under the field, which keeps focus, and the message follows the typing so it clears when fixed. A good one adds an unverified card at the end, moves focus to its Verify button and says so. When every network is on the page the select is disabled and the form says to remove one first.

Every network is a list item with its own heading, and every button names it ("Verify TikTok", "Remove Instagram", "Check the TikTok bio now"). Verify is a disclosure with aria-expanded and aria-controls, and the closed card content is inert. Verified is said in words as well as with an icon, and the tiles are hidden from assistive technology because the name is beside them. The field names its problem, and one polite status line reports each result.

Each card keeps its tile, name, handle and state and moves its buttons under them. The code and its Copy button wrap, Check now sits above the result line, and the add form stacks its three parts.