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

export const meta = {
  title: 'avatar',
  group: 'Data Display',
}

## Avatar

Avatars represent a user or a team. Stacked avatars represent a group of people.

<Playground
  desc="The `Avatar` contains circle and square."
  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="Sizes"
  desc="You can specify different sizes of `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="Text"
  desc="Display text in the avatar box."
  scope={{ Avatar }}
  code={`
<>
  <Avatar text="W" />
  <Avatar text="A" />
  <Avatar text="W" />
  <Avatar text="Joe" />
</>
`}
/>

<Playground
  title="Group"
  desc="Multiple avatars can overlap and stack together."
  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="W" stacked />
        <Avatar text="Ana" stacked />
      </Avatar.Group>
    </>
  )
}
`}
/>

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

| Attribute    | Description                        | Type                | Accepted values                              | Default  |
| ------------ | ---------------------------------- | ------------------- | -------------------------------------------- | -------- |
| **src**      | image src                          | `string`            | -                                            | -        |
| **stacked**  | stacked display group              | `boolean`           | -                                            | `false`  |
| **text**     | display text when image is missing | `string`            | -                                            | -        |
| **size**     | avatar size                        | `string` / `number` | `'mini', 'small', 'medium', 'large', number` | `medium` |
| **isSquare** | avatar shape                       | `boolean`           | -                                            | `false`  |
| ...          | native props                       | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...`     | -        |

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

| Attribute | Description        | Type             | Accepted values                  | Default |
| --------- | ------------------ | ---------------- | -------------------------------- | ------- |
| **count** | show total members | `number`         | -                                | -       |
| ...       | native props       | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |

</Attributes>

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