import { Layout, Playground, Attributes } from 'lib/components'
import { Pagination, Spacer } from 'components'
import ChevronRight from '@geist-ui/icons/chevronRight'
import ChevronLeft from '@geist-ui/icons/chevronLeft'
import ChevronRightCircle from '@geist-ui/icons/chevronRightCircle'
import ChevronLeftCircle from '@geist-ui/icons/chevronLeftCircle'
import ChevronRightCircleFill from '@geist-ui/icons/chevronRightCircleFill'
import ChevronLeftCircleFill from '@geist-ui/icons/chevronLeftCircleFill'

export const meta = {
  title: '分页 Pagination',
  group: '导航',
}

## Pagination / 分页

多个页面之间的导航与鉴别。

<Playground
  scope={{ Pagination }}
  desc="默认的分页会自动收缩与扩展。"
  code={`
<Pagination count={20} initialPage={3} />
`}
/>

<Playground
  title="Limit"
  desc="调整最大可展示页面数。"
  scope={{ Pagination }}
  code={`
<>
  <Pagination count={10} limit={10} />
  <Pagination count={5} />
  <Pagination count={10} initialPage={6} limit={5} />
  <Pagination count={10} initialPage={6} />
  <Pagination count={30} initialPage={6} limit={10} />
</>
`}
/>

<Playground
  title="Icon"
  desc="用图标定制按钮。"
  scope={{
    Spacer,
    Pagination,
    ChevronRight,
    ChevronLeft,
    ChevronRightCircle,
    ChevronLeftCircle,
    ChevronRightCircleFill,
    ChevronLeftCircleFill,
  }}
  code={`
<>
  <Pagination count={5}>
   <Pagination.Next><ChevronRight /></Pagination.Next>
   <Pagination.Previous><ChevronLeft /></Pagination.Previous>
  </Pagination>
  <Spacer h={.5} />
  <Pagination count={5}>
   <Pagination.Next><ChevronRightCircle /></Pagination.Next>
   <Pagination.Previous><ChevronLeftCircle /></Pagination.Previous>
  </Pagination>
  <Spacer h={.5} />
  <Pagination count={5}>
   <Pagination.Next><ChevronRightCircleFill /></Pagination.Next>
   <Pagination.Previous><ChevronLeftCircleFill /></Pagination.Previous>
  </Pagination>
</>
`}
/>

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

| 属性            | 描述                   | 类型                     | 推荐值                   | 默认 |
| --------------- | ---------------------- | ------------------------ | ------------------------ | ---- |
| **initialPage** | 初始选中的页面         | `number`                 | -                        | 1    |
| **page**        | 当前页码               | `number`                 | -                        | 1    |
| **count**       | 页码数量               | `number`                 | -                        | 1    |
| **limit**       | 一次可展示页面的最大值 | `number`                 | -                        | 7    |
| **onChange**    | 分页器的事件           | `(page: number) => void` | -                        | -    |
| ...             | 原生属性               | `HTMLAttributes`         | `'id', 'className', ...` | -    |

<Attributes.Title>Pagination.Previous.Props</Attributes.Title>

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

<Attributes.Title>Pagination.Next.Props</Attributes.Title>

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

</Attributes>

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