1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React from 'react'
import { storiesOf } from '@storybook/react'

import { AvatarGroup, Avatar } from '@dailykit/ui'

storiesOf('Avatar', module)
   .add('Variant', () => <Avatar title='Jack Middle Jones' type='round' />)
   .add('With Initials', () => <Avatar title='Jack Middle Jones' />)
   .add('With Image', () => (
      <Avatar
         title='Jack Middle Jones'
         url='https://randomuser.me/api/portraits/men/61.jpg'
      />
   ))
   .add('With Name', () => (
      <Avatar
         withName
         title='Jack Middle Jones'
         url='https://randomuser.me/api/portraits/men/61.jpg'
      />
   ))
   .add('Multiple Avatars', () => (
      <div>
         <AvatarGroup>
            <Avatar title='Mary' />
            <Avatar
               title='Jack Middle Jones'
               url='https://randomuser.me/api/portraits/men/61.jpg'
            />
            <Avatar title='James Arthur' />
         </AvatarGroup>
         <AvatarGroup>
            <Avatar title='Mary' type='round' />
            <Avatar
               type='round'
               title='Jack Middle Jones'
               url='https://randomuser.me/api/portraits/men/61.jpg'
            />
            <Avatar title='James Arthur' type='round' />
         </AvatarGroup>
      </div>
   ))