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

# User (пользователь)

Наследует [Div props](/docs/components/Div).

Пользователь используется для краткого отображения информации о пользователях. Он использует [Avatar](/docs/components/Avatar) компонент для отображения аватара пользователя.

```jsx
import { User } from '@startupjs/ui'
```

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

```jsx example
return (
  <User avatarUrl='/img/avatar1.jpeg' />
)
```

## Размеры

Размер по умолчанию - `m`. Его можно изменить, изменив свойство `size`. Возможные значения свойства можно найти в разделе `Песочница` внизу страницы.

```jsx example
return (
  <Div>
    <User
      size='s'
      avatarUrl='/img/avatar2.jpeg'
      name='John Doe'
      description='s размер'
    />
    <Br />
    <User
      avatarUrl='/img/avatar3.jpeg'
      name='John Doe'
      description='m размер, это размер по умолчанию'
    />
    <Br />
    <User
      size='l'
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='l размер'
    />
  </Div>
)
```

## User status

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

```jsx example
return (
  <Div>
    <User
      status='online'
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='Online description'
    />
    <Br />
    <User
      status='away'
      avatarUrl='/img/avatar2.jpeg'
      name='John Doe'
      description='Offline description'
    />
  </Div>
)
```

## Положение аватара пользователя

Положение аватара можно изменить, передав строку `left` (по умолчанию) или `right` в свойство `avatarPosition`.

```jsx example
return (
  <User
    avatarPosition='right'
    avatarUrl='/img/avatar1.jpeg'
    name='John Doe'
    description='The cat is a domestic species of small carnivorous mammal'
  />
)
```

## Действия

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

```jsx example
const [clicked, setClicked] = useState(0)
return (
  <Div>
    <User
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      onPress={() => setClicked(clicked + 1)}
    />
    <Br />
    <Span>
      {clicked ? `User clicked ${clicked} ${clicked === 1 ? 'time' : 'times'}` : 'Click on user'}
    </Span>
  </Div>
)
```

## Кастомная иконка статуса

Можно указать кастомные компоненты для иконок статуса, используя свойство `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`
  Div
    User(
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      src='/img/avatar1.jpeg'
      status='online'
    )
    Br
    User(
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      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)
`
```

## Sandbox

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