import { Layout, Playground, Attributes } from 'lib/components'
import { Breadcrumbs, Spacer } from 'components'
import NextLink from 'next/link'
import Home from '@geist-ui/icons/home'
import Inbox from '@geist-ui/icons/inbox'

export const meta = {
  title: '面包屑 Breadcrumbs',
  group: '导航',
}

## Breadcrumbs / 面包屑导航

显示用户在应用中的层级位置。

<Playground
  scope={{ Breadcrumbs }}
  code={`
<Breadcrumbs>
  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
</Breadcrumbs>
`}
/>

<Playground
  title="分隔符"
  desc="定制字符中的分隔符。"
  scope={{ Breadcrumbs, Spacer }}
  code={`
<>
  <Breadcrumbs separator="-">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
    <Breadcrumbs.Item >Page</Breadcrumbs.Item>
  </Breadcrumbs>
  <Spacer h={.5} />
  <Breadcrumbs separator=">">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Separator>:</Breadcrumbs.Separator>
    <Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
    <Breadcrumbs.Item >Button</Breadcrumbs.Item>
  </Breadcrumbs>
</>
`}
/>

<Playground
  title="图标"
  desc="以图标表达更多信息。"
  scope={{ Breadcrumbs, Home, Inbox }}
  code={`
<Breadcrumbs>
  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>
  <Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
</Breadcrumbs>
`}
/>

<Playground
  title="结合 NextJS"
  desc="与 `next.js` 结合使用的示例。"
  scope={{ Breadcrumbs, NextLink }}
  code={`
<Breadcrumbs>
  <NextLink href="/">
    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
  </NextLink>
  <NextLink href="/en-us/components">
    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
  </NextLink>
  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>
`}
/>

<Attributes edit="/pages/zh-cn/components/breadcrumbs.mdx">
<Attributes.Title>Breadcrumbs.Props</Attributes.Title>

| 属性          | 描述     | 类型             | 推荐值                   | 默认 |
| ------------- | -------- | ---------------- | ------------------------ | ---- |
| **separator** | 分隔符   | `string`         | -                        | `/`  |
| ...           | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |

<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>

| 属性         | 描述                  | 类型                          | 推荐值                   | 默认    |
| ------------ | --------------------- | ----------------------------- | ------------------------ | ------- |
| **href**     | 链接地址              | `string`                      | -                        | -       |
| **nextLink** | 是否为 `next.js` 路由 | `boolean`                     | -                        | `false` |
| **onClick**  | 点击事件              | `(event: MouseEvent) => void` | -                        | -       |
| ...          | 原生属性              | `AnchorHTMLAttributes`        | `'id', 'className', ...` | -       |

<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>

| 属性 | 描述     | 类型             | 推荐值                   | 默认 |
| ---- | -------- | ---------------- | ------------------------ | ---- |
| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
