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

export const meta = {
  title: 'Snippet',
  group: 'Others',
}

## Snippet

Display a snippet of copyable code for the command line.

<Playground
  desc="Basic usage."
  scope={{ Snippet }}
  code={`
<Snippet text="yarn add @zeit-ui/react" width="300px" />
`} />

<Playground
  title="width"
  desc="Specify width manually."
  scope={{ Snippet }}
  code={`
<Snippet text="yarn add @zeit-ui/react" width="100%" />
`} />

<Playground
  title="types"
  desc="Show different states with colors."
  scope={{ Snippet, Spacer }}
  code={`
<>
  <Snippet text="yarn add @zeit-ui/react" type="dark" width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="success" width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="warning" width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="error" width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="secondary" width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="lite" width="300px" />
</>
`} />

<Playground
  title="Multi Line"
  scope={{ Snippet }}
  code={`
<Snippet text={['cd project', 'now']} width="300px" />
`} />

<Playground
  title="without copy"
  desc="Hide icon for copy. (disable copy)"
  scope={{ Snippet }}
  code={`
<Snippet copy="prevent" text="yarn add @zeit-ui/react" width="300px" />
`} />

<Playground
  title="filled"
  scope={{ Snippet, Spacer }}
  code={`
<>
  <Snippet text="yarn add @zeit-ui/react" type="success" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="warning" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="error" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @zeit-ui/react" type="secondary" filled width="300px" />
</>
`} />

<Attributes edit="/pages/en-us/components/snippet.mdx">
<Attributes.Title>Snippet.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **text** | code snippet | `string` `Array<string>` | - | - |
| **type** | snippet types | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` |
| **filled** | filled style | `boolean` | - | `false` |
| **width** | set CSS string | `string` | - | `initial` |
| **copy** | function of copy button | `CopyTypes` | `'default', 'slient', 'prevent'` | `default` |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

<Attributes.Title>SnippetTypes</Attributes.Title>

```ts
type SnippetTypes = 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

</Attributes>

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