import './demo1.css';
import Avatar from '..';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <div className="avatar-demo">
      <Avatar size="xl" icon="account" />
      <Avatar size="large" icon="account" />
      <Avatar size="medium" icon="account" />
      <Avatar size="small" icon="account" />
    </div>
    <div className="avatar-demo">
      <Avatar shape="square" size="xl" icon="account" />
      <Avatar shape="square" size="large" icon="account" />
      <Avatar shape="square" size="medium" icon="account" />
      <Avatar shape="square" size="small" icon="account" />
    </div>

    <div className="avatar-demo">
      <Avatar.Group>
        <Avatar size="small" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="small" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="small" style={{ backgroundColor: '#87d068' }} icon="account" />
        <Avatar size="small" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="small" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="small" style={{ backgroundColor: '#87d068' }} icon="account" />
      </Avatar.Group>
    </div>

    <div className="avatar-demo">
      <Avatar.Group>
        <Avatar src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar style={{ backgroundColor: '#87d068' }} icon="account" />
        <Avatar src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar style={{ backgroundColor: '#87d068' }} icon="account" />
      </Avatar.Group>
    </div>

    <div className="avatar-demo">
      <Avatar.Group>
        <Avatar size="large" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="large" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="large" style={{ backgroundColor: '#87d068' }} icon="account" />
        <Avatar size="large" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="large" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="large" style={{ backgroundColor: '#87d068' }} icon="account" />
      </Avatar.Group>
    </div>

    <div className="avatar-demo">
      <Avatar.Group>
        <Avatar size="xl" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="xl" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="xl" style={{ backgroundColor: '#87d068' }} icon="account" />
        <Avatar size="xl" src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png" />
        <Avatar size="xl" style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        <Avatar size="xl" style={{ backgroundColor: '#87d068' }} icon="account" />
      </Avatar.Group>
    </div>

  </div>,
  document.getElementById('avatar-demo-1'),
);