Tabs

Requirements

• Accept items with unique value, label, and panel fields, an optional defaultValue, and a unique groupId. Items stay fixed after mount in this exercise.
• Select defaultValue initially when it matches an item; otherwise use the first item. Empty items render no buttons or content.
• Render each tab label as a real button with type="button" and data-value equal to its item value. Clicking it selects that item.
• Each non-empty group must show exactly one content paragraph with data-testid="visible-panel", containing the selected item’s panel text. Unselected panels should not be rendered.
• Set aria-pressed="true" only on the selected button and false on the others. The provided CSS uses this state to highlight the active button.
• Keep each group’s state independent. Switching one must not affect another; repeated clicks on the active button must not duplicate panels.
• Preserve the root data-testid from groupId. Use groupId + "-panel" as the visible panel id and each button’s aria-controls, so groups have distinct IDs.
• Preserve the supplied demo content and groups. Keep CSS separate and do not use an existing tabs component library.
• This is basic button-based tab switching. Advanced ARIA tab roles, custom arrow-key navigation, controlled props, dynamic item replacement, and asynchronous panels are outside scope.

Examples

Input: Initial render
Output: Primary: HTML panel. Secondary: CSS panel.

Input: Click JavaScript in the primary group
Output: Primary shows its JavaScript panel; secondary stays on CSS.

Input: Empty items
Output: No buttons and no panel.