import { Layout, Playground, Attributes } from 'lib/components'
import { Capacity, Spacer, useTheme } from 'components'

export const meta = {
  title: '容量 Capacity',
  group: '数据展示',
}

## Capacity / 容量

显示一个容量指示器。

<Playground
  scope={{ Capacity, Spacer }}
  code={`
<>
  <Capacity value={15} /> <Spacer />
  <Capacity value={45} /> <Spacer />
  <Capacity value={95} />
</>
`} />

<Playground
  title="固定色彩"
  desc="指定一个颜色以覆盖默认的。"
  scope={{ Capacity, Spacer, useTheme }}
  code={`
() => {
  const theme = useTheme()
  return <Capacity value={75} color={theme.palette.success} />
}
`} />

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

| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- |  -------------- | ------ |
| **value** | 当前的容量值 | `number` | - | 0 |
| **limit** | 最大的容量值 | `number` | - | 100 |
| **color** | CSS 颜色值 | `string` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - |

</Attributes>

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