react/pages/docs/components/code.mdx

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

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

## Code


<Playground
  title="Basic"
  scope={{ Code }}
  code={`
<p>Run <Code>npm i @zeit-ui/react</Code> to install.</p>
`} />


<Playground
  title="Code Block"
  scope={{ Code }}
  code={`
() => {
  const codes = \`npm i @zeit-ui/react
yarn add @zeit-ui/react\`
  return <Code block>{codes}</Code>
}
`} />

<Playground
  title="width"
  scope={{ Code }}
  code={`
() => {
  const codes = \`npm i @zeit-ui/react
yarn add @zeit-ui/react\`
  return <Code block width="50%">{codes}</Code>
}
`} />

<Playground
  title="overlong"
  scope={{ Code }}
  code={`
() => {
  const codes = \`npm i @zeit-ui/react npm i @zeit-ui/react npm i @zeit-ui/react
yarn add @zeit-ui/react\`
  return <Code block width="50%">{codes}</Code>
}
`} />

<Attributes edit="/pages/docs/components/code.mdx">
<Attributes.Title>Code.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **block** | show code in `pre` | `boolean` | - | `false` |
| **width** | set CSS width | `string` | - | `initial` |
| ... | native props | `HTMLAttributes` | `'className', ...` | - |

</Attributes>

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