import { Layout, Playground, Attributes } from 'lib/components'
import { Divider, Text } from 'components'

export const meta = {
  title: 'Divider',
  group: 'Others',
}

## Divider

A divider line separates different content.

<Playground
  desc="Basic usage."
  scope={{ Divider, Text }}
  code={`
<>
  <Text>
    In server-driven content negotiation, or proactive content negotiation,
    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
    These headers describe the preferred choice of the user.
  </Text>
  <Divider />
  <Text>
    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
    The algorithm is server-specific and not defined in the standard.
  </Text>
</>
`}
/>

<Playground
  title="With Text"
  desc="Display text or components in divider."
  scope={{ Divider, Text }}
  code={`
<>
  <Text>
    In server-driven content negotiation, or proactive content negotiation,
    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
    These headers describe the preferred choice of the user.
  </Text>
  <Divider>HTTP</Divider>
  <Text>
    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
    The algorithm is server-specific and not defined in the standard.
  </Text>
  <Divider align="start">standard headers</Divider>
  <Text>
    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)
  </Text>
</>
`}
/>

<Playground
  title="Space"
  desc="Custom size of white space around components."
  scope={{ Divider, Text }}
  code={`
<>
  <Text>
    In server-driven content negotiation, or proactive content negotiation,
    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
    These headers describe the preferred choice of the user.
  </Text>
  <Divider h={5}>HTTP</Divider>
  <Text>
    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
    The algorithm is server-specific and not defined in the standard.
  </Text>
  <Divider my={5} h={5}>standard headers</Divider>
  <Text>
    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)
  </Text>
</>
`}
/>

<Playground
  title="Types"
  desc="Different state."
  scope={{ Divider, Text }}
  code={`
<>
  <Text>
    In server-driven content negotiation, or proactive content negotiation,
    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
    These headers describe the preferred choice of the user.
  </Text>
  <Divider h={3} type="success">HTTP</Divider>
  <Text>
    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
    The algorithm is server-specific and not defined in the standard.
  </Text>
  <Divider h={3} my={3} type="warning">standard headers</Divider>
  <Text>
    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)
  </Text>
</>
`}
/>

<Attributes edit="/pages/en-us/components/divider.mdx">
<Attributes.Title>Divider.Props</Attributes.Title>

| Attribute | Description       | Type                          | Accepted values                  | Default   |
| --------- | ----------------- | ----------------------------- | -------------------------------- | --------- |
| **type**  | type of divider    | [DividerTypes](#dividertypes) | -                                | `default` |
| **align** | alignment of text | [DividerAlign](#divideralign) | -                                | `center`  |
| ...       | native props      | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -         |

<Attributes.Title>DividerTypes</Attributes.Title>

```ts
type DividerTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

<Attributes.Title>DividerAlign</Attributes.Title>

```ts
type DividerAlign = 'center' | 'start' | 'left' | 'end' | 'right'
```

</Attributes>

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