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

export const meta = {
  title: '片段 Snippet',
  group: '其他',
}

## Snippet / 片段

显示可拷贝的命令行代码片段。

<Playground
  desc="展示一个命令。"
  scope={{ Snippet }}
  code={`
<Snippet text="yarn add @geist-ui/react" width="300px" />
`}
/>

<Playground
  title="宽度"
  desc="手动地指定宽度。"
  scope={{ Snippet }}
  code={`
<Snippet text="yarn add @geist-ui/react" width="100%" />
`}
/>

<Playground
  title="类型"
  desc="以颜色区分不同的类型。"
  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="多行"
  scope={{ Snippet }}
  code={`
<Snippet text={['cd project', 'now']} width="300px" />
`}
/>

<Playground
  title="无拷贝"
  desc="隐藏拷贝按钮。 (禁用拷贝)"
  scope={{ Snippet }}
  code={`
<Snippet copy="prevent" text="yarn add @geist-ui/react" width="300px" />
`}
/>

<Playground
  title="填充"
  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/zh-cn/components/snippet.mdx">
<Attributes.Title>Snippet.Props</Attributes.Title>

| 属性          | 描述               | 类型                          | 推荐值                           | 默认                   |
| ------------- | ------------------ | ----------------------------- | -------------------------------- | ---------------------- |
| **text**      | 命令文本           | `string` `Array<string>`      | -                                | -                      |
| **type**      | 组件类型           | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes)    | `default`              |
| **filled**    | 填充风格的样式     | `boolean`                     | -                                | `false`                |
| **width**     | 设置 CSS 宽度      | `string`                      | -                                | `initial`              |
| **copy**      | 拷贝按钮的工作方式 | `CopyTypes`                   | `'default', 'slient', 'prevent'` | `default`              |
| **symbol**    | 组件左侧显示的字符 | `string`                      | -                                | `$`                    |
| **toastText** | 拷贝提示的字符     | `string`                      | -                                | `Copied to clipboard!` |
| **toastType** | 拷贝提示的类型     | `NormalTypes`                 | [NormalTypes](#normaltypes)      | `success`              |
| ...           | 原生属性           | `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>
