import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Breadcrumb,Icon } from "../src/index";

storiesOf("Breadcrumb", module).add("Breadcrumb", () => {
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
        <p>基本</p>
        <Breadcrumb separator={<Icon type="arrow-right" />}>
          <Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            All Categories
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Women’s Clothing
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Blouses & Shirts
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            T-shirts&nbsp; <b>78,999</b> Results
          </Breadcrumb.Item>
        </Breadcrumb>
        <p>显示省略</p>
        <Breadcrumb maxNode={5}>
          <Breadcrumb.Item link="javascript:void(0);">Home 1</Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">Whatever 2</Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            All Categories 3
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Women’s Clothing 4
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Blouses & Shirts 5
          </Breadcrumb.Item>
          <Breadcrumb.Item>T-shirts 6</Breadcrumb.Item>
        </Breadcrumb>
        <p>下拉菜单</p>
        <Breadcrumb maxNode={4}>
          <Breadcrumb.Item link="javascript:void(0);">Home 1</Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">Whatever 2</Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            All Categories 3
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Women’s Clothing 4
          </Breadcrumb.Item>
          <Breadcrumb.Item link="javascript:void(0);">
            Blouses & Shirts 5
          </Breadcrumb.Item>
          <Breadcrumb.Item>T-shirts 6</Breadcrumb.Item>
        </Breadcrumb>
      </div>
    </div>
  );
});
