import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
import { Row, Col } from 'components'

export const meta = {
  title: 'layout',
  description: 'tenotext',
}

## Layout

Smart and simple layout components.

<Playground
  desc="`Row` can create basic row container."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '10px' }}> <ExampleBlock /> </Row>
  <Row> <ExampleBlock /> </Row>
</>
`} />

<Playground
  title="column"
  desc="`Col` can create columns of different widths."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>

  <Row>
    <Col span={8}><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>
</>
`} />

<Playground
  title="gap"
  desc="`Row` provides `gap` prop to specify spacings between columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>

  <Row gap={.8}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>
</>
`} />

<Playground
  title="compose"
  desc="Create compose layout by combining the basic 1/24 columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={8}><ExampleBlock /></Col>
  </Row>

  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={8}><ExampleBlock /></Col>
    <Col span={8}><ExampleBlock /></Col>
    <Col span={4}><ExampleBlock /></Col>
    <Col span={4}><ExampleBlock /></Col>
  </Row>

  <Row gap={.8}>
    <Col span={4}><ExampleBlock /></Col>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={4}><ExampleBlock /></Col>
  </Row>
</>
`} />

<Playground
  title="alignment"
  desc="Use `justify` and `align` make to alignment of columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
  </Row>

  <Row gap={.8} justify="center" style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
  </Row>

  <Row gap={.8} justify="end" style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
  </Row>

  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={9}><ExampleBlock style={{ height: '60px' }}/></Col>
    <Col span={5}>
      <Row align="top" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="middle" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="bottom" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
  </Row>
</>
`} />

<Attributes edit="/pages/docs/components/layout.mdx">
<Attributes.Title>Row.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **gap** | grid spacing | `number` | - | 0 |
| **justify** | horizontal alignment | `Justify` | `'start', 'end', 'center', 'space-around', 'space-between'` | `start` |
| **align** | vertical alignment | `Align` | `'top', 'middle', 'bottom'` | `top` |
| **component** | component name | `keyof JSX.IntrinsicElements` | - | `div` |
| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |

<Attributes.Title>Col.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **span** | number of column the grid spans | `number` | 0 - 24 | 24 |
| **offset** | current column offset | `number` | - | 0 |
| **component** | component name | `keyof JSX.IntrinsicElements` | - | `div` |
| ... | native props | `HTMLAttributes` | `'name', 'className', ...` | - |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>