Tabs

Build a tabs component: a row of tabs where clicking one shows its panel and hides the others. It's the canonical "one of N selected" UI, and the key insight is that a single piece of state — the index of the selected tab — drives everything: which tab looks active and which panel is shown. This is the base for the tabs family that adds ARIA and keyboard support next.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A tablist of buttons and one visible panel, chosen by the selected index.

Examples

selected = 0  → Overview tab active, Overview panel shown
click Pricing → selected = 1, Pricing tab active, Pricing panel shown
click Reviews → selected = 2, Reviews panel shown

Only ONE panel is rendered at a time — the one at `tabs[selected]`.
The active tab is simply the one whose index === selected.

Notes

• One selected index. Track a single number, not a boolean per tab. Two "active" booleans can drift; one index can't.
• Show one panel. Render tabs[selected].content — not all panels with the inactive ones hidden by CSS.
• Derive active styling. A tab is active when its index equals selected; the class follows from that comparison.
• Out of scope. ARIA roles and keyboard arrow navigation — Tabs II and Tabs III. Here it's selection + the visible panel.