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="ZEIT 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 @zeit-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>
