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

import Menu from './';
import { Row, Col } from '../Grid'
import Card from '../Card'
import Link from '../Link'

<Meta title="Data Display|Menu" component={Menu} />

# Menu

<Preview>
  <Story name="Index">
    <Row gutter={[32, 32]}>
      <Col span={4}>
        <Card>
          <Menu>
            <Menu.Item active icon="home">Home</Menu.Item>
            <Menu.Item icon="competitions">
              Competitions
            </Menu.Item>
            <Menu.Item icon="reports">Reports</Menu.Item>
            <Menu.Item icon="points">Points</Menu.Item>
          </Menu>
        </Card>
      </Col>
    </Row>
  </Story>
</Preview>

### Horizontal Menu

<Preview>
  <Story name="Horizontal Menu">
    <Row gutter={[32, 32]}>
      <Col span={12}>
        <Card>
          <Menu layout="horizontal" size="small">
            <Menu.Item active>Purchase</Menu.Item>
            <Menu.Item>Entry</Menu.Item>
            <Menu.Item>Email Referral</Menu.Item>
            <Menu.Item>Milestones</Menu.Item>
            <Menu.Item>Birthday</Menu.Item>
            <Menu.Item>Profile</Menu.Item>
          </Menu>
        </Card>
      </Col>
    </Row>
  </Story>
</Preview>

#### Props

<Props of={Menu} />