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

export const meta = {
  title: '陈列框 Display',
  group: '数据展示',
}

## Display / 陈列框

以居中对齐的方式展示重要的信息或图像。

<Playground
  desc="为一张图片添加描述文本。"
  scope={{ Display, Image }}
  code={`
  <Display shadow caption="Now 在 PR 上的自动部署。">
    <Image width="435" height="200" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
  </Display>
`}
/>

<Playground
  title="与代码组件组合"
  desc="展示多行的代码块。"
  scope={{ Display, Code }}
  code={`
() => {
  const codes = \`{
  "build": {
    "env": {
      "VARIABLE_NAME": "@secret-name"
    }
  }
}\`
  return (
    <Display width="500px" caption="为应用程序的构建定义环境变量。">
      <Code block>{codes}</Code>
    </Display>
  )
}
`}
/>

<Playground
  title="与片段组件组合"
  desc="展示 Shell 代码片段。"
  scope={{ Display, Snippet }}
  code={`
  <Display width="500px" caption="运行此命令以下载库。">
    <Snippet type="dark">yarn add @geist-ui/react</Snippet>
  </Display>
`}
/>

<Playground
  title="组件标题"
  desc="在 `caption` 属性上使用组件表达更丰富的信息。"
  scope={{ Display, Code, Image }}
  code={`
  <Display shadow caption={<p>将域名 <Code>www.zeit.rocks</Code> 重定向至 <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/zh-cn/components/display.mdx">
<Attributes.Title>Display.Props</Attributes.Title>

| 属性        | 描述                          | 类型                   | 推荐值 | 默认          |
| ----------- | ----------------------------- | ---------------------- | ------ | ------------- |
| **caption** | description for display block | `ReactNode` / `string` | -      | -             |
| **shadow**  | show shadow                   | `boolean`              | -      | `false`       |
| **width**   | set width                     | `string`               | -      | `fit-content` |
| ...         | 原生属性                      | `HTMLAttributes`       | -      | -             |

</Attributes>

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