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` serves as the root element of the application. It purpose is to render content within the safe area boundaries of a device. Also it displays a [StatusBar](https://reactnative.dev/docs/statusbar) for `android` & `ios` native apps.

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


## Simple example

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