import { Canvas, Controls, Meta, Source, Story } from "@storybook/blocks";
import * as TabsStories from "./tabs.stories.tsx";

<Meta of={TabsStories} />

# Tabs

Use the tabs component when you want to display content separated by tabs.

```typescript
import { Tabs } from "@chromia/ui-kit";
```

## Component

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="tabs--default" />
</Canvas>

## Usage

The `tabs` props is of type `TabsData[]` which is an array of an object type consiting of 4 properties:

- `index: string` represents a unique value that associates the content with a trigger.
- `tabName: string | React.ReactElement` the text that will be rendered in the trigger or the Link element.
- `content: React.ReactNode` the content that will be rendered for the tab.
- `count?: number` optional property that if set will display a smaller "count" text beside the `tabName`.

## Props

<Controls />