react/pages/en-us/components/avatar.mdx

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 h={.5} />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
      <Avatar src={url} isSquare />
    </>
  )
}
`}
/>

<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`            | -                                        | -       |
| **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>