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

Content used as a parent container for elements.

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

## Simple Example

By default content has left and right paddings of `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>
)
```

## Vertical paddings

Top and bottom paddings can be added by passing the `padding` property to component.

```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 space

Content takes the `full` property, which gives it all the empty space on the main `flexbox` axis of the parent.

```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>
)
```

## Max width

Content has limited max-width by default of `768px`, because we are making mobile first layout and can only go from smaller to larger screens by changing `width` property (possible values of property can be found in the `Sandbox` section at the bottom of the page). Also you can change the default width value for component by overriding `defaultWidth` property in your `$UI.Content.defaultWidth`. **We don't recommend to change the `defaultWidth` unnecessarily, because it is a more advanced setting that will change all your entire app.**

```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

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