import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Dropdown from './';
import Icon from '../Icon/Icon'
import Button from '../Button'
import Avatar from '../Avatar'

<Meta title="Navigation|Dropdown" component={Dropdown} />

# Dropdown

<Preview>
  <Story name="Index">
    <div style={{ padding: 30 }}>
      <Dropdown
        overlay={(
            <>
                <Dropdown.Item icon="profile">Label</Dropdown.Item>
                <Dropdown.Item icon="profile">Label</Dropdown.Item>
                <Dropdown.Item icon="profile">Label</Dropdown.Item>
            </>
        )}
    >
    <Button size="large">
<Icon name='add' size={16} />
        Norbit Manila
        <Icon name='arrow-down' size={16} />
    </Button>
    </Dropdown>
    </div>
  </Story>
</Preview>

# Dropdown Avatar

<Preview>
  <Story name="Avatar Index">
    <div style={{ padding: 30 }}>
      <Dropdown
        overlay={(
            <>
                <Dropdown.Item icon="explore">Help center</Dropdown.Item>
                <Dropdown.Item icon="clock">Sign out</Dropdown.Item>
            </>
        )}
    >
      <Avatar
        size={100}
        src="https://media.istockphoto.com/photos/portrait-of-pretty-cheerful-girl-in-eyewear-holding-open-diary-in-picture-id979983212"
      >
        B.V
      </Avatar>
    </Dropdown>
    </div>
  </Story>
</Preview>

#### Props

<Props of={Dropdown} />