106. Tabs

Build a Tabs component in React that allows users to switch between different content panels.

Requirements

1. Tab Navigation

• Display a list of tabs horizontally
• Each tab should have a label
• Show which tab is currently active
• Clicking a tab switches to that tab's content

2. Tab Content

• Display content for the active tab only
• Hide content for inactive tabs
• Content should change when switching tabs

3. Visual States

• Active tab should have distinct styling (underline, background, etc.)
• Inactive tabs should be visually distinct
• Hover states for better UX

4. Data Structure

interface Tab {
  id: string;
  label: string;
  content: React.ReactNode;
}

interface TabsProps {
  tabs: Tab[];
  defaultTab?: string;
}

Example Usage

const tabs = [
  { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
  { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
  { id: 'tab3', label: 'Tab 3', content: <div>Content 3</div> },
];

> Note: Use semantic HTML and ensure proper accessibility with ARIA attributes.