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

export const meta = {
  title: 'Code',
  group: 'General',
}

## Code

Show source code in a standardized way.

<Note>
  Want to display <Code>shell</Code> code snippets? Try{' '}
  <NextLink href="/en-us/components/snippet">
    <Link color>Snippet</Link>
  </NextLink>
  .
</Note>

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

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

<Playground
  title="width"
  desc="Specify width manually, or other styles."
  scope={{ Code }}
  code={`
() => {
  const codes = \`npm i @geist-ui/react
yarn add @geist-ui/react\`
  return <Code block width="50%">{codes}</Code>
}
`}
/>

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

<Attributes edit="/pages/en-us/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>
