import { useState, useCallback } from 'react'
import { pug } from 'startupjs'
import Avatar from '../Avatar'
import Row from '../Row'
import Div from '../Div'
import Span from '../typography/Span'
import Br from '../Br'
import { Sandbox } from '@startupjs/docs'
import { styl } from 'startupjs'

# Avatar (аватар)
Аватары могут быть использованы для представления людей. При использовании с определенным логотипом аватары также могут использоваться для представления бренда. Они также могут быть заполнителем, когда нет изображения или изображение не может быть загружено по какой-то причине, чтобы быть показанным, показывая в этом случае альтернативу.

```js
import { Avatar } from '@startupjs/ui'
```

## Простой пример

```jsx example
return pug`
  Avatar(src='/img/avatar1.jpeg')
`
```

## Размеры

Размер по умолчанию - `m`. Его можно изменить, изменив свойство `size` задав его в виде одного из значений ('s', 'm','l') или указав размер в пикселях.

```jsx example
return pug`
  Row
    Div(pushed)
      Avatar(
        size='s'
        src='/img/avatar2.jpeg'
      )
    Div(pushed)
      Avatar(
        size='m'
        src='/img/avatar3.jpeg'
      )
    Div(pushed)
      Avatar(
        size='l'
        src='/img/avatar1.jpeg'
      )
    Div(pushed)
      Avatar(
        size=60
        src='/img/avatar3.jpeg'
      )
`
```

## Статус пользователя

Аватары могут быть использованы для отображения онлайн-статуса пользователя. Он может быть установлен путем передачи строки `online` или `away` в свойство `status`.

```jsx example
return pug`
  Row
    Div
      Avatar(
        status='online'
        src='/img/avatar1.jpeg'
      )
    Div(pushed)
      Avatar(
        status='away'
        src='/img/avatar2.jpeg'
      )
`
```

Также можно указать кастомные компоненты для иконок статуса, используя свойство `statusComponents`.

```jsx example
const AbsentStatus = useCallback(({ style }) => (
  <Div style={style} styleName='absent'>
    <Div styleName='absent-line absent-line-1' />
    <Div styleName='absent-line absent-line-2' />
  </Div>
))

return pug`
  Avatar(
    pushed
    src='/img/avatar2.jpeg'
    status='absent'
    statusComponents={
      absent: AbsentStatus
    }
  )
`

styl`
  .absent
    background-color white
    justify-content center
    &-line
      position absolute
      height 2px
      left 0
      right 0
      background-color red
      &-1
        transform rotate(45deg)
      &-2
        transform rotate(-45deg)
`
```

## Резервная строка

Если свойство `url` не указано или произошла ошибка при загрузке изображения аватара, то компонент использует альтернативу. Альтернативой является инициалы двух первых слов `children` строки если она указана и `?` если нет. В приведенном ниже примере `резервная строка` - 'John Doe', поэтому будет отображаться 'JD'.

```jsx example
return pug`
  Row
    Div
      Avatar(src='/img/non-existen-image.jpeg')
    Div(pushed)
      Avatar(
        src='/img/non-existen-image.jpeg'
      ) John Doe
`
```

## Действия

Переданный обработчик в `onPress` свойство будет вызван когда пользователь нажмет на компонент.

```jsx example
const [counter, setCounter] = useState(0)

return pug`
  Div
    Avatar(
      src='/img/avatar1.jpeg'
      onPress=()=> setCounter(counter + 1)
    )
    Br
    Span= 'Нажато ' + counter + ' раз'
`
```

## Sandbox

<Sandbox
  Component={Avatar}
  props={{
    onPress: () => alert('"onPress" event on "Avatar" component'),
  }}
/>