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

# Layout (лаяут)

`Layout` служит корневым элементом приложения. Его цель - отрисовка содержимого в пределах границ безопасной области устройства. Также он отображает [StatusBar](https://reactnative.dev/docs/statusbar) для нативных приложений `android` и `ios`.

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

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

```jsx example
return (
  <Layout style={{
    backgroundColor: '#fff',
    height: u(25),
    alignItems: 'center',
    justifyContent: 'center'
  }}>
    <Span>Layout area</Span>
  </Layout>
)
```

## Sandbox

<Sandbox
  Component={Layout}
  props={{
    style: {
      backgroundColor: '#f1f1f1',
      height: u(25),
      alignItems: 'center',
      justifyContent: 'center'
    },
    children: (
      <Div styleName='child'>
        <Span>Lorem ipsum</Span>
      </Div>
    )
  }}
  block
/>