import Content from '../Content'
import Div from '../Div'
import Span from '../typography/Span'
import Br from '../Br'
import { u } from 'startupjs'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# Content (контент)

Контент используется в качестве родительского контейнера для элементов.

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

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

По умолчанию контент имеет левый и правый отступ равный `16px'.

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Content style={contentStyle}>
    <Div style={divStyle}>
      <Span>content</Span>
    </Div>
  </Content>
)
```

## Вертикальные отступы

Верхний и нижний отступы могут быть добавлены путём передачи свойства `padding` в компонент.

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Content style={contentStyle} padding>
    <Div style={divStyle}>
      <Span>content</Span>
    </Div>
  </Content>
)
```

## Полное пространство

Контент принимает свойство `full`, которое дает ему все пустое пространство по главной `flexbox` оси родителя.

```jsx example
const divStyle = {
  height: u(25),
  backgroundColor: '#2962FF'
}
const contentStyle = {
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Div>
    <Div style={divStyle}>
      <Content style={contentStyle}>
        <Span>Content without full</Span>
      </Content>
    </Div>
    <Br />
    <Div style={divStyle}>
      <Content style={contentStyle} full>
        <Span>Content with full</Span>
      </Content>
    </Div>
  </Div>
)
```

## Максимальная ширина

Контент имеет ограниченную максимальную ширину по умолчанию `768px`, потому что мы верстаем mobile first и можем только перейти от меньших экранов к большим, изменив свойство `width` (возможные значения свойства можно найти в разделе `Sandbox` в нижней части страницы). Кроме того, вы можете изменить стандартное значение ширины для компонента заоверрайдив свойство `defaultWidth` в вашем `$UI.Content.defaultWidth`. **Мы не рекомендуем изменять `defaultWidth` без необходимости, потому что это более продвинутая настройка, которая изменит все ваше приложение целиком.**

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Div>
    <Content
      style={contentStyle}
      width='mobile'
      padding
    >
      <Div style={divStyle}>
        <Span>Mobile</Span>
      </Div>
    </Content>
    <Br />
    <Content
      style={contentStyle}
      padding
    >
      <Div style={divStyle}>
        <Span>Tablet (default)</Span>
      </Div>
    </Content>
    <Br />
    <Content
      style={contentStyle}
      width='desktop'
      padding
    >
      <Div style={divStyle}>
        <Span>Desktop</Span>
      </Div>
    </Content>
    <Br />
    <Content
      style={contentStyle}
      width='wide'
      padding
    >
      <Div style={divStyle}>
        <Span>Full Width</Span>
      </Div>
    </Content>
  </Div>
)
```

## Песочница

<Sandbox
  Component={Content}
  props={{
    style: { backgroundColor: '#2962FF' },
    children: <Div styleName='child' />,
  }}
  rendererStyleName='renderer'
  block
/>