import { useState } from 'react'
import { faTimesCircle, faStopCircle } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'
import Br from '../Br'
import Div from '../Div'
import Row from '../Row'
import Tag from '../Tag'
import './index.mdx.styl'

# Tag (тег)

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

Теги - это компактные элементы, представляющие входные данные, атрибут или действие. Они позволяют пользователям вводить информацию, делать выбор, фильтровать контент или инициировать действия. В то время как предполагается, что кнопки будут появляться с призывами к действию, теги должны появляться динамически как группа из нескольких интерактивных элементов.

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

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

```jsx example
return (
  <Row>
    <Tag>Тег</Tag>
  </Row>
)
```

## Цвета

Цвет по умолчанию `primary`. Его можно изменить, изменив свойство `color`. Возможные значения свойства можно найти в разделе `Sandbox` внизу страницы.

```jsx example
return (
  <Row>
    <Tag pushed='s'>Primary (default)</Tag>
    <Tag color='success' pushed='s'>Success</Tag>
    <Tag color='warning' pushed='s'>Warning</Tag>
    <Tag color='error' pushed='s'>Error</Tag>
  </Row>
)
```

## Размеры

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

```jsx example
return (
  <Div style={{ alignItems: 'flex-start' }}>
    <Tag size='s'>Размер 's'</Tag>
    <Br />
    <Tag>Размер 'm' (по умолчанию)</Tag>
  </Div>
)
```

## Контурные теги

Контурные теги предлагают альтернативный стиль, в свойство `variant` нужно передать `outlined` или `outlined-bg` для контурного тега с фоном.

```jsx example
return (
  <Row>
    <Tag variant='outlined'>Контурный тег</Tag>
    <Tag variant='outlined-bg' pushed='s'>Контурный тег с фоном</Tag>
  </Row>
)
```

## Формы

Теги могут иметь различную угловую форму. Её можно изменить, изменив свойство `shape` (`circle` по умолчанию) на `rounded`.

```jsx example
return (
  <Row>
    <Tag>Круглая форма (по умолчанию)</Tag>
    <Tag shape='rounded' pushed='s'>Закругленная форма</Tag>
  </Row>
)
```

## Иконки

Иконки слева и справа могут быть добавлены с помощью свойств `icon` и `secondaryIcon`. Чтобы изменить цвет иконки, используйте соответствующее свойство `iconStyleName` или  `secondaryIconStyleName`.

In `.styl` file
```stylus
.icon
  color $UI.colors.dark
.secondaryIcon
  color $UI.colors.error
```

```jsx example
return (
  <Row>
    <Tag icon={faStopCircle}>
      Иконка слева
    </Tag>
    <Tag
      secondaryIcon={faStopCircle}
      variant='outlined-bg'
      pushed='s'
    >
      Иконка справа
    </Tag>
    <Tag
      iconStyleName='icon'
      secondaryIconStyleName='secondaryIcon'
      variant='outlined'
      icon={faStopCircle}
      secondaryIcon={faTimesCircle}
      pushed='s'
    >
      Две иконки
    </Tag>
  </Row>
)
```

## Действия
Тег можно сделать интерактивным используя `onPress` свойство.

```jsx example
const [counter, setCounter] = useState(0)
return (
  <Tag onPress={() => setCounter(counter + 1)}>
    Нажато {counter} раз
  </Tag>
)
```

## Песочница

<Sandbox
  Component={Tag}
  extraParams={{
    icon: { showIconSelect: true },
    secondaryIcon: { showIconSelect: true }
  }}
  props={{
    children: 'Hello world!',
    onPress: () => alert('"onPress" event on Tag component'),
    onLongPress: () => alert('"onLongPress" event on Tag component'),
  }}
/>