Color Swatch Picker

Build a swatch color picker as a single React component. A row of six fixed swatches sits under a large preview box; clicking a swatch selects it, and that one choice drives the preview background, the hex label, and the selected ring. It's a tiny piece of stateful UI, but the point is that all three visible effects read from a single source of truth.

Task

The starter App.tsx renders the six swatches with the first one selected and inert. Make it interactive:

1. Hold the state. Track the chosen color with useState(COLORS[0]).
2. Select on click. Each swatch's onClick calls setSelected(c) with its own color.
3. Reflect it three ways. From selected: set the preview's background, show the hex string in the label, and add the selected class to the one matching swatch.

Examples

• The page loads with the red swatch ringed, the preview red, and the label reading #ef4444.
• Clicking the green swatch turns the preview green, updates the label to #22c55e, and moves the ring onto the green swatch.
• Only ever one swatch is ringed, because the ring is derived from selected, not stored per swatch.

Notes

• One value, three effects. Don't track the preview color, the label text, and the ring separately — derive all three from selected.
• The swatch colors are a fixed palette. They live in a constant array and set each swatch's background via an inline style; only the selected one changes.
• Use real buttons. Each swatch is a <button>, so keyboard focus and activation come for free; give it an aria-label with the hex so it's announced.
• Styling (dark theme, preview, swatches, ring) is already in styles.css; focus on the state.