import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import Avatar from './Avatar';

<Meta title="Data Display|Avatar" component={Avatar} />

# Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

<Preview>
  <Story name="Index">
    <div style={{ backgroundColor: '#fcfbf8', padding: 32 }}>
      <Avatar
        size="small"
        src="https://media.istockphoto.com/photos/portrait-of-pretty-cheerful-girl-in-eyewear-holding-open-diary-in-picture-id979983212"
      >
        B.V
      </Avatar>
      &nbsp;&nbsp;&nbsp;
      <Avatar src="https://media.istockphoto.com/photos/portrait-of-pretty-cheerful-girl-in-eyewear-holding-open-diary-in-picture-id979983212">
        B.V
      </Avatar>
      &nbsp;&nbsp;&nbsp;
      <Avatar
        size="large"
        src="https://media.istockphoto.com/photos/portrait-of-pretty-cheerful-girl-in-eyewear-holding-open-diary-in-picture-id979983212"
      >
        B.V
      </Avatar>
    </div>
  </Story>
</Preview>

### Avatar Icon

<Preview>
  <Story name="Avatar Icon">
    <div style={{ backgroundColor: '#fcfbf8', padding: 32 }}>
      <Avatar
        size="large"
        icon="profile"
      />
    </div>
  </Story>
</Preview>

### Avatar Text

<Preview>
  <Story name="Avatar Text">
    <div style={{ backgroundColor: '#fcfbf8', padding: 32 }}>
      <Avatar
        size="large"
      >
        J.D
      </Avatar>
    </div>
  </Story>
</Preview>

### Avatar Custom Size

<Preview>
  <Story name="Avatar Custom Size">
    <div style={{ backgroundColor: '#fcfbf8', padding: 32 }}>
      <Avatar
        size={150}
        src="https://media.istockphoto.com/photos/portrait-of-pretty-cheerful-girl-in-eyewear-holding-open-diary-in-picture-id979983212"
      />
    </div>
  </Story>
</Preview>

### Props

<Props of={Avatar} />