import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Tabs from "./Tabs";

# Tabs

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock defaultValue="bots">
  {(value, setValue) => (
    <Tabs value={value}>
      <Tabs.Item value="bots" onClick={setValue} icon="bot-says">
        Bots
      </Tabs.Item>
      <Tabs.Item value="templates" onClick={setValue} icon="user-says">
        Templates
      </Tabs.Item>
      <Tabs.Item value="businesses" onClick={setValue} icon="entities">
        Businesses
      </Tabs.Item>
    </Tabs>
  )}
</CodeBlock>

## Configuration

<ConfigBlock of={Tabs} />

## Examples

### Without Icons

<CodeBlock defaultValue="bots">
  {(value, setValue) => (
    <Tabs value={value}>
      <Tabs.Item value="bots" onClick={setValue}>
        Bots
      </Tabs.Item>
      <Tabs.Item value="templates" onClick={setValue}>
        Templates
      </Tabs.Item>
      <Tabs.Item value="businesses" onClick={setValue}>
        Businesses
      </Tabs.Item>
    </Tabs>
  )}
</CodeBlock>

### Themed with Icons

<CodeBlock defaultValue="bots">
  {(value, setValue) => (
    <Tabs value={value} themed>
      <Tabs.Item value="bots" onClick={setValue} icon="bot-says" themed>
        Bots
      </Tabs.Item>
      <Tabs.Item value="templates" onClick={setValue} icon="user-says" themed>
        Templates
      </Tabs.Item>
      <Tabs.Item value="businesses" onClick={setValue} icon="entities" themed>
        Businesses
      </Tabs.Item>
    </Tabs>
  )}
</CodeBlock>

### Themed without Icons

<CodeBlock defaultValue="bots">
  {(value, setValue) => (
    <Tabs value={value} themed>
      <Tabs.Item value="bots" onClick={setValue} themed>
        Bots
      </Tabs.Item>
      <Tabs.Item value="templates" onClick={setValue} themed>
        Templates
      </Tabs.Item>
      <Tabs.Item value="businesses" onClick={setValue} themed>
        Businesses
      </Tabs.Item>
    </Tabs>
  )}
</CodeBlock>