import { TabExamples, MDXLayoutNext } from '@/components';

export const meta = {
  templateTitle: 'Tab',
  description: 'Tab component | Fluid Design',
  date: '2023-02-01',
  author: 'Oliver Pan',
  tags: [
    'fluid ui',
    'react',
    'framer motion',
    'headless ui',
    'tailwindcss',
    'tab',
  ],
};

export default (props) => (
  <MDXLayoutNext meta={meta} components={TabExamples} {...props} />
);

# Tab

Tabs are used to organize content into different sections.
They are useful when you have a lot of content and need to organize it into different sections.

<CodeFrame title=''>
  <TabExamples.Default />
</CodeFrame>

## Basic example

<CH.Code style={{height:"16rem"}}>

```jsx main.jsx
import { Tab } from '@fluid-design/fluid-ui';

import { data } from './data';

function Example() {
  return <Tab tabs={tabs} />;
}
```

```jsx data.tsx
export const Content = ({ title }) => {
  return (
    <>
      <h2 className='mb-2 font-semibold text-gray-800 dark:text-gray-200'>
        {title}
      </h2>
      <div className='grid h-28 place-items-center rounded-lg bg-gray-200 p-4 dark:bg-gray-800'>
        <PhotoIcon className='h-8 w-8 text-gray-400 dark:text-gray-500' />
      </div>
    </>
  );
};

export const tabs = ['Recent', 'Trending', 'For You'].map((title) => ({
  title,
  content: <Content title={title} />,
}));
```

</CH.Code>

## Use as component

If you want to use the tab component as a component, you can use the `as` prop.

<CodeFrame title='Component'>
  <TabExamples.AsComponent />
</CodeFrame>

```jsx
import { Tab } from '@fluid-design/fluid-ui';

function Example() {
  return (
    <Tab>
      <Tab.List className='w-full'>
        <Tab.ListItem>Tab 1</Tab.ListItem>
        <Tab.ListItem>Tab 2</Tab.ListItem>
        <Tab.ListItem>Tab 3</Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>
          <Content title='Tab 1' />
        </Tab.Panel>
        <Tab.Panel>
          <Content title='Tab 2' />
        </Tab.Panel>
        <Tab.Panel>
          <Content title='Tab 3' />
        </Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}
```

## Programmatically activate tab

You can programmatically activate a tab by using the `selectedIndex` prop.
With this prop, you can control which tab is active. It's also possible
to use the `onChange` prop to get the index of the selected tab.

<CodeFrame title='Auto change tab'>
  <TabExamples.Programmatic />
</CodeFrame>

```jsx
import { Tab } from '@fluid-design/fluid-ui';
import { useEffect, useState } from 'react';

function Example() {
  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveTabIndex((prev) => {
        if (prev === 2) {
          return 0;
        }
        return prev + 1;
      });
    }, 3800);
    return () => clearInterval(interval);
  }, []);
  return (
      <Tab
        onChange={setActiveTabIndex as any}
        selectedIndex={activeTabIndex as any}
        tabs={tabs}
        className='w-full'
      />
  );
}
```

## Tab styles

You can customize the tab variant by using the `shape`, `size` and `weight` props.

```jsx
<Tab
  shape='square' // "square" | "round" | "pill"
  size='xl' // "xs" | "sm" | "base" | "lg" | "xl"
  weight='light' // "clear" | "normal" | "light"
/>
```

## Component API

### Tab

The `Tab` component is the wrapper component for the tab component.

| Prop                   | Default     | Description                                                                                                                                                                                  |
| ---------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as`                   | `div`       | `'div' \| Component` <Table.D>Component to render as</Table.D>                                                                                                                               |
| `tabs`                 | `undefined` | `Tab[]` <Table.D>Array of tabs</Table.D> <pre>title:<br/>\| string<br/>\| \{ text?: string; iconStart?: React.ReactNode \| \{ (props): JSX.Element \} \}<br/>content: React.ReactNode;</pre> |
| `shape`                | `round`     | `'square' \| 'round' \| 'pill'` <Table.D>Shape of the tab</Table.D>                                                                                                                          |
| `size`                 | `base`      | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` <Table.D>Size of the tab</Table.D>                                                                                                                  |
| `weight`               | `normal`    | `'clear' \| 'normal' \| 'light'` <Table.D>Weight of the tab</Table.D>                                                                                                                        |
| `tabClassName`         |             | `string` <Table.D>Class name for the tab</Table.D>                                                                                                                                           |
| `tabActiveClassName`   |             | `string` <Table.D>Class name for the active tab</Table.D>                                                                                                                                    |
| `tabInactiveClassName` |             | `string` <Table.D>Class name for the inactive tab</Table.D>                                                                                                                                  |
| `tabPanelClassName`    |             | `string` <Table.D>Class name for the tab panel</Table.D>                                                                                                                                     |
| `onChange`             | `undefined` | `(index: number) => void` <Table.D>Callback when the tab is changed</Table.D>                                                                                                                |
| `selectedIndex`        | `undefined` | `number` <Table.D>Index of the selected tab</Table.D>                                                                                                                                        |

### Tab.List

The `Tab.List` component is the wrapper component for the tab list.

| Prop                   | Default  | Description                                                                 |
| ---------------------- | -------- | --------------------------------------------------------------------------- |
| `as`                   | `div`    | `'div' \| Component` <Table.D>Component to render as</Table.D>              |
| `shape`                | `round`  | `'square' \| 'round' \| 'pill'` <Table.D>Shape of the tab</Table.D>         |
| `size`                 | `base`   | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` <Table.D>Size of the tab</Table.D> |
| `weight`               | `normal` | `'clear' \| 'normal' \| 'light'` <Table.D>Weight of the tab</Table.D>       |
| `className`            | ``       | `string` <Table.D>Class name for the tab list</Table.D>                     |
| `tabClassName`         |          | `string` <Table.D>Class name for the tab</Table.D>                          |
| `tabActiveClassName`   |          | `string` <Table.D>Class name for the active tab</Table.D>                   |
| `tabInactiveClassName` |          | `string` <Table.D>Class name for the inactive tab</Table.D>                 |

### Tab.ListItem

The `Tab.ListItem` component is the wrapper component for the tab list item.

| Prop                   | Default  | Description                                                                                                                |
| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| `title`                |          | `string \| { text?: string; iconStart?: React.ReactNode \| { (props): JSX.Element } }` <Table.D>Title of the tab</Table.D> |
| `as`                   | `div`    | `'div' \| Component` <Table.D>Component to render as</Table.D>                                                             |
| `shape`                | `round`  | `'square' \| 'round' \| 'pill'` <Table.D>Shape of the tab</Table.D>                                                        |
| `size`                 | `base`   | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` <Table.D>Size of the tab</Table.D>                                                |
| `weight`               | `normal` | `'clear' \| 'normal' \| 'light'` <Table.D>Weight of the tab</Table.D>                                                      |
| `className`            |          | `string` <Table.D>Class name for the tab list item</Table.D>                                                               |
| `tabClassName`         |          | `string` <Table.D>Class name for the tab</Table.D>                                                                         |
| `tabActiveClassName`   |          | `string` <Table.D>Class name for the active tab</Table.D>                                                                  |
| `tabInactiveClassName` |          | `string` <Table.D>Class name for the inactive tab</Table.D>                                                                |

### Tab.Panels

The `Tab.Panels` component is the wrapper component for the tab panel.

| Prop        | Default | Description                                               |
| ----------- | ------- | --------------------------------------------------------- |
| `className` |         | `string` <Table.D>Class name for the tab panels</Table.D> |

### Tab.Panel

The `Tab.Panel` component is the wrapper component for the tab panel.

| Prop                | Default | Description                                              |
| ------------------- | ------- | -------------------------------------------------------- |
| `tabPanelClassName` |         | `string` <Table.D>Class name for the tab panel</Table.D> |