# TabHeader

**When to use:** A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages. Each tab carries an icon plus an optional title, subtitle and end content such as a badge.

**Keywords:** tabs navigation, tab bar, pill, counter

**Import:** `import { TabHeader } from '@ahrowe/ui'`

**Mobile behaviour:** On narrow screens (≤ 640px) only the active tab keeps its title and subtitle; every other tab collapses to its icon and `endContent`.

```tsx
import { useState } from 'react';
import { TabHeader, Badge, ThemeColor } from '@ahrowe/ui';
import type { TabHeaderTab } from '@ahrowe/ui';
import { faUser, faBell, faGear, faInbox, faAt } from '@fortawesome/free-solid-svg-icons';

const TABS: TabHeaderTab[] = [
  { id: 'profile', icon: faUser, title: 'Profile', subtitle: 'Your details' },
  { id: 'notifications', icon: faBell, title: 'Notifications', subtitle: 'Email & push' },
  { id: 'settings', icon: faGear, title: 'Settings' },        // title only
];

function Example() {
  const [tab, setTab] = useState('profile');
  return <TabHeader tabs={TABS} currentTab={tab} onChange={setTab} />;
}

// Icon-only tabs
<TabHeader
  tabs={[{ id: 'a', icon: faUser }, { id: 'b', icon: faGear }]}
  currentTab={tab}
  onChange={setTab}
/>

// A count next to the title, still shown when a narrow screen collapses the tab
<TabHeader
  tabs={[
    { id: 'inbox', icon: faInbox, title: 'Inbox', endContent: <Badge count={12} /> },
    { id: 'mentions', icon: faAt, title: 'Mentions', endContent: <Badge count={3} color={ThemeColor.Error} /> },
  ]}
  currentTab={tab}
  onChange={setTab}
/>

// Disabled tab — dimmed and not selectable
<TabHeader
  tabs={[
    { id: 'a', icon: faUser, title: 'Profile' },
    { id: 'b', icon: faGear, title: 'Billing', disabled: true },
  ]}
  currentTab={tab}
  onChange={setTab}
/>
```

**TabHeaderProps:**

| Prop | Type | Description |
|------|------|-------------|
| `tabs` | `TabHeaderTab[]` | The tabs to render, in order |
| `currentTab` | `string` | `id` of the selected tab |
| `onChange` | `(id: string) => void` | Called with the tab `id` when a different, enabled tab is clicked |

**TabHeaderTab:**

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | Unique identifier, matched against `currentTab` |
| `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (always visible, incl. mobile) |
| `title` | `ReactNode` | Optional title next to the icon |
| `subtitle` | `ReactNode` | Optional subtitle beneath the title |
| `endContent` | `ReactNode` | After the labels. Stays visible when a narrow screen collapses the tab, so keep it small: a `Badge`, a dot |
| `disabled` | `boolean` | Dim the tab and prevent selection |

**Slots:** `root` `tab` `icon` `labels` `title` `subtitle` `endContent`