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 = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
  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 = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
  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 = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
  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>
