import { useEffect } from 'react'
import Divider from '../Divider'
import Span from '../typography/Span'
import Row from '../Row'
import Content from '../Content'
import { Sandbox } from '@startupjs/docs'
import { $root } from 'startupjs'

# Divider (разделитель)

Разделитель - это тонкая линия, которая используется для разделения контента на тематические блоки. Например, тематический разрыва между параграфами.

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

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

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
    <Divider />
    <Span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
  </Content>
)
```

## Размеры

Размер тонкой линии разделителя может быть изменен с помощью свойства `size`. Размер по умолчанию - `m`.

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
    <Divider size='l' />
    <Span>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Span>
  </Content>
)
```

## Ширина разделителя

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

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Span>
    <Divider lines={4} />
    <Span>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Span>
  </Content>
)
```

## Вертикальный разделитель

По умолчанию разделитель отображается горизонтально. Чтобы сделать его вертикальным, нужно передать строку `vertical` в свойство `variant`.

```jsx example
return (
  <Content padding style={{ backgroundColor: 'white' }}>
    <Row>
      <Span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </Span>
      <Divider variant='vertical' />
      <Span>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Span>
    </Row>
  </Content>
)
```

## Sandbox

<Sandbox
  Component={Divider}
  $props={$root.scope('_session.Props.Divider')}
  block
/>

export function SandboxEvents () {
  const $divider = $root.scope('_session.Props.Divider')
  useEffect(()=> {
    $divider.at('variant').on('change', variant => {
      if (variant === 'horizontal') {
        if ($divider.get('style')) $divider.del('style')
      } else {
        $divider.set('style', { height: 48 })
      }
    })
  }, [])
  return null
}

<SandboxEvents />