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

export const meta = {
  title: '头像 Avatar',
  group: '数据展示',
}

## Avatar / 头像

头像代表一个用户或团队，堆叠的头像表示了一个群体。

<Playground
  desc="`Avatar` 组件包含了圆形与方形。"
  scope={{ Avatar, Spacer }}
  code={`
() => {
  const url = '/images/avatar.png'
  return (
    <>
      <Avatar src={url} />
      <Avatar src={url} />
      <Avatar src={url} />
      <Avatar src={url} />
      <Spacer y={.5} />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
    </>
  )
}
`}
/>

<Playground
  title="大小"
  desc="你可以指定每个 `Avatar` 组件的大小。"
  scope={{ Avatar }}
  code={`
() => {
  const url = '/images/avatar.png'
  return (
    <>
      <Avatar src={url} size="mini" />
      <Avatar src={url} size="small" />
      <Avatar src={url} size="medium" />
      <Avatar src={url} size="large" />
    </>
  )
}
`}
/>

<Playground
  title="文本"
  desc="在头像框内显示文本信息。"
  scope={{ Avatar }}
  code={`
<>
  <Avatar text="W" />
  <Avatar text="A" />
  <Avatar text="W" />
  <Avatar text="Joe" />
</>
`}
/>

<Playground
  title="头像组"
  desc="多个头像框可以堆叠在一起。"
  scope={{ Avatar, Spacer }}
  code={`
() => {
  const url = '/images/avatar.png'
  return (
    <>
      <Avatar.Group>
        <Avatar src={url} stacked />
        <Avatar src={url} stacked />
        <Avatar src={url} stacked />
        <Avatar src={url} stacked />
      </Avatar.Group>
      <Spacer />
      <Avatar.Group count={12}>
        <Avatar src={url} stacked />
        <Avatar text="刘" stacked />
        <Avatar text="Ana" stacked />
      </Avatar.Group>
    </>
  )
}
`}
/>

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

| 属性         | 描述                         | 类型                | 推荐值                                       | 默认     |
| ------------ | ---------------------------- | ------------------- | -------------------------------------------- | -------- |
| **src**      | 图像链接                     | `string`            | -                                            | -        |
| **stacked**  | 是否堆叠显示                 | `boolean`           | -                                            | `false`  |
| **text**     | 文本，当无图像链接时才会显示 | `string`            | -                                            | -        |
| **size**     | 头像大小                     | `string` / `number` | `'mini', 'small', 'medium', 'large', number` | `medium` |
| **isSquare** | 是否为方形头像               | `boolean`           | -                                            | `false`  |
| ...          | 原生属性                     | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...`     | -        |

<Attributes.Title>Avatar.Group.Props</Attributes.Title>

| 属性      | 描述         | 类型             | 推荐值                           | 默认 |
| --------- | ------------ | ---------------- | -------------------------------- | ---- |
| **count** | 显示成员数量 | `number`         | -                                | -    |
| ...       | 原生属性     | `HTMLAttributes` | `'id', 'name', 'className', ...` | -    |

</Attributes>

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