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 @geist-ui/react" width="300px" />
`}
/>

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

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

<Playground
  title="custom symbol"
  scope={{ Snippet }}
  code={`
<Snippet symbol=">" text="yarn add @geist-ui/react" width="300px" />
`}
/>

<Playground
  title="custom toast"
  scope={{ Snippet }}
  code={`
<Snippet toastText="Code copied!" toastType="secondary" text="yarn add @geist-ui/react" width="300px" />
`}
/>

<Playground
  title="filled"
  scope={{ Snippet, Spacer }}
  code={`
<>
  <Snippet text="yarn add @geist-ui/react" type="success" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @geist-ui/react" type="warning" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @geist-ui/react" type="error" filled width="300px" />
  <Spacer />
  <Snippet text="yarn add @geist-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`              |
| **symbol**    | symbol snippet          | `string`                      | -                                | `$`                    |
| **toastText** | toast text              | `string`                      | -                                | `Copied to clipboard!` |
| **toastType** | toast type              | `NormalTypes`                 | [NormalTypes](#normaltypes)      | `success`              |
| ...           | native props            | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -                      |

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

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

<Attributes.Title>NormalTypes</Attributes.Title>

```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

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