import { Select } from '../../../components';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';

export const argTypes = {
  component: Select,
  title: 'Components/Select',
};

<Meta
  title="Components/Select"
  component={Select}
/>

export const SelectTemplate = args => (
  <div className="h-80 w-40">
    <Select {...args} />
  </div>
);

<Heading
  title="Select"
  componentRelativePath="Select/Select.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

Select is a component that allows you to select from a list

<Canvas>
  <Story
    name="Overview"
    args={{
      isClearable: false,
      onChange: item => alert(item.label),
      options: [
        { label: 'item1', value: 1 },
        { label: 'item2', value: 2 },
      ],
      value: 2,
    }}
  >
    {SelectTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Select} />

## Contribute

<Footer componentRelativePath="Select/__stories__/Select.stories.mdx" />
