import { useState } from 'react'
import Br from '../Br'
import Content from '../Content'
import Div from '../Div'
import Span from '../typography/Span'
import { u } from 'startupjs'
import NumberInput from '../forms/NumberInput'
import { Sandbox } from '@startupjs/docs'

# Br

`Br` используется для вставки разрыва строки. Он также позволяет разработчику настроить необходимое количество разрывов строк.

```jsx
import { Br } from 'startupjs/ui'
```

## Простой пример
```jsx example
return (
  <Br />
)
```

## Количество линий

Количество разрывов линий можно изменить, передав число в свойство `lines`. Значение по умолчанию для `lines` равно `1`, а ширина одной строки - `16px`.

```jsx example
const itemStyle = {
  height: u(5),
  justifyContent: 'center',
  alignItems: 'center'
}
const [value, setValue] = useState(1)
return (
  <Content>
    <NumberInput
      label='Введите количество разрывов линий'
      value={value}
      onChangeNumber={num => setValue(num)}
    />
    <Br />
    <Div style={itemStyle} level={1}>
      <Span>Item 1</Span>
    </Div>
    <Br lines={Number(value)} />
    <Div style={itemStyle} level={1}>
      <Span>Item 2</Span>
    </Div>
  </Content>
)
```

## Половина разрыва строки

Устанавливая свойство `half` в `true` создает разрыв строки, равный значению `lines` в `0.5`.

```jsx example
const itemStyle = {
  height: u(5),
  justifyContent: 'center',
  alignItems: 'center'
}
return (
  <Content>
    <Div style={itemStyle} level={1}>
      <Span>Item 1</Span>
    </Div>
    <Br half />
    <Div style={itemStyle} level={1}>
      <Span>Item 2</Span>
    </Div>
  </Content>
)
```

## Sandbox

<Sandbox Component={Br} />