text: import React from 'react';
  import Avatar from '../lib/components/Avatar/Avatar';
  
  export default {
    title: 'Avatar',
    component: Avatar,
  };
  
  export const ExtraSmall = () => {
    return (
      <Avatar
        size="xs"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  
  export const Small = () => {
    return (
      <Avatar
        size="sm"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  
  export const Medium = () => {
    return (
      <Avatar
        size="md"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  
  export const Large = () => {
    return (
      <Avatar
        size="lg"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  
  export const ExtraLarge = () => {
    return (
      <Avatar
        size="xl"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  
  export const ExtraExtraLarge = () => {
    return (
      <Avatar
        size="xxl"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
        alt="author"
      />
    );
  };
  