Centered Light Avatar Email Capture CTA Block for React

The chips are a multiple-choice toggle group: each one is a button that is pressed or not, and any combination is allowed. A pressed chip gets a foreground border, a muted fill and a small check on its avatar, so the state isn't carried by colour alone. The chosen topics live in one list, picked, which the confirmation reads when the form is sent.

Pressing "Subscribe" with nothing chosen doesn't send anything: a message with a warning icon says "Pick at least one topic" in a polite live region under the chips, and focus goes to the first chip. Choosing a topic clears it. The email is checked after the topics, so each problem is shown on its own.

The data at the top of the file, TOPICS, holds each topic's label, its author's name and initials. Replace the initials with a photo by adding an AvatarImage before the fallback in the chip; the initials stay as the fallback while it loads. The avatar is decorative, and a screen reader hears the author in the chip's name, "Design, by Mira Okafor", through visually hidden text.

Tab reaches the chips, and Space or Enter presses one; the email field and the button follow in order. Each chip's name is its label and its author, and the group is named "Topics" and introduced by the "Pick what you want" legend. The count under the chips is a polite live region, so a screen reader hears the new count after each change.

The request is simulated in submit: sent keeps the topics that were chosen, phase goes to "sending" and a timer (LATENCY) sets it to "done". Replace the timer with a request that sends the address and the list of topic values, for example as tags or list ids, and return to "idle" with a message if it fails. "Use another address" resets the form for the next person.

The chips wrap and stay centered, two on one line and one below at 320 px, and the email field and button stack at full width. The confirmation wraps a long address anywhere instead of widening the panel.