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

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

## Code

Show source code in a standardized way.

<Note>Want to display <Code>shell</Code> code snippets? Try <Link pure color href="/docs/components/snippet">Snippet</Link>.</Note>

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


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

<Playground
  title="width"
  desc="Specify width manually, or other styles."
  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"
  desc="Out of range presentation."
  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>