import { Layout, Playground, Attributes } from 'lib/components'
import { Display, Code, Snippet, Image } from 'components'

export const meta = {
  title: 'Display',
  group: 'Data Display',
}

## Display

To display important information or images in a central alignment.

<Playground
  title="Basic"
  desc="Describe the main part with a paragraph."
  scope={{ Display, Image }}
  code={`
  <Display shadow caption="Now for GitHub deploying a pull request automatically.">
    <Image width="435" height="200" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
  </Display>
`}
/>

<Playground
  title="With Code"
  desc="Show multiline code blocks."
  scope={{ Display, Code }}
  code={`
() => {
  const codes = \`{
  "build": {
    "env": {
      "VARIABLE_NAME": "@secret-name"
    }
  }
}\`
  return (
    <Display width="500px" caption="Application's build with a defined environment variable.">
      <Code block>{codes}</Code>
    </Display>
  )
}
`}
/>

<Playground
  title="With Snippet"
  desc="Show shell codes."
  scope={{ Display, Snippet }}
  code={`
  <Display width="500px" caption="Run this command to install the library.">
    <Snippet type="dark">yarn add @geist-ui/react</Snippet>
  </Display>
`}
/>

<Playground
  title="Component Caption"
  desc="Use component on `caption` prop."
  scope={{ Display, Code, Image }}
  code={`
  <Display shadow caption={<p>A domain redirect that redirects requests made to <Code>www.zeit.rocks</Code> to <Code>zeit.rocks</Code>.</p>}>
    <Image width="650" height="297" src="https://zeit.co/docs/static/docs/custom-domains/redirecting-domains.png" />
  </Display>
`}
/>

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

| Attribute   | Description                   | Type                   | Accepted values | Default       |
| ----------- | ----------------------------- | ---------------------- | --------------- | ------------- |
| **caption** | description for display block | `ReactNode` / `string` | -               | -             |
| **shadow**  | show shadow                   | `boolean`              | -               | `false`       |
| **width**   | set width                     | `string`               | -               | `fit-content` |
| ...         | native props                  | `HTMLAttributes`       | -               | -             |

</Attributes>

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