import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Avatar from '../Avatar';
import * as AvatarStories from './Avatar.stories';

<Meta of={AvatarStories} />

# Avatar

<br />

## `Avatars` are used to represent a person with a profile picture.

<br />

### With Picture

<Canvas>
  <Story of={AvatarStories.WithPicture} />
</Canvas>

### Without Picture

<Canvas>
  <Story of={AvatarStories.WithoutPicture} />
</Canvas>

## Usage Example

```jsx
import Avatar from '@appdirect/sfb-theme-components/src/atoms/avatar/Avatar';

<Avatar
    name="Wayne Gretzky"
    picture="https://www.hockeydb.com/ihdb/photos/wayne-gretzky-1996-40.jpg"
/>

```

## Props

<ArgsTable of={Avatar} />
