import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Avatar from "./Avatar";

# Avatar

## intials is required prop

> Avatar Icon with default size 40px

<CodeBlock>
  <Avatar
    url="https://simply-learn.herokuapp.com/assets/undraw_profile.svg"
    initials="SF"
  />
</CodeBlock>

> With width 50px and height auto

<CodeBlock>
  <Avatar
    url="https://simply-learn.herokuapp.com/assets/undraw_profile.svg"
    initials="JH"
    size="50px"
  />
</CodeBlock>

> Icon With different height width

<CodeBlock>
  <Avatar
    initials="AB"
    size="40px"
    url="https://i.ibb.co/wWKLSHP/zenchat.png"
  />
</CodeBlock>

<CodeBlock>
  <Avatar
    initials="CD"
    size="40px"
    url="https://i.ibb.co/3RQCVHb/salesforce.png"
  />
</CodeBlock>

> Avatar Icon with default size 40px and broken url

<CodeBlock>
  <Avatar
    url="https://simply-learn.herokuapp.com/assets/undrraw_profile.svg"
    initials="SF"
  />
</CodeBlock>

> With default size 40px

<CodeBlock>
  <Avatar initials="za" />
</CodeBlock>

> With 50px height and width

<CodeBlock>
  <Avatar initials="AB" size="50px" />
</CodeBlock>