import { Layout, Playground, Attributes } from 'lib/components'
import { Keyboard } from 'components'

export const meta = {
  title: 'Keyboard',
  group: 'Data Display',
}

## Keyboard

Display keyboard input that triggers an action.

The `Keyboard` can only display layout styles, if you need to bind the keyboard events, please read subsection [useKeyboard](/en-us/hooks/use-keyboard).

<Playground
  scope={{ Keyboard }}
  code={`
<Keyboard>f</Keyboard>
`}
/>

<Playground
  title="modifiers"
  scope={{ Keyboard }}
  code={`
<div>
  <Keyboard command mr="10px" />
  <Keyboard shift mr="10px" />
  <Keyboard option mr="10px" />
  <Keyboard ctrl mr="10px" />
</div>
`}
/>

<Playground
  title="combination"
  scope={{ Keyboard }}
  code={`
<div>
  <Keyboard command mr="10px">f</Keyboard>
  <Keyboard shift mr="10px">e</Keyboard>
  <Keyboard option ctrl mr="10px">b</Keyboard>
</div>
`}
/>

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

| Attribute   | Description      | Type                   | Accepted values               | Default |
| ----------- | ---------------- | ---------------------- | ----------------------------- | ------- |
| **command** | show command key | `boolean`              | -                             | `false` |
| **shift**   | show shift key   | `boolean`              | -                             | `false` |
| **option**  | show option key  | `boolean`              | -                             | `false` |
| **ctrl**    | show ctrl key    | `boolean`              | -                             | `false` |
| ...         | native props     | `KeygenHTMLAttributes` | `'keyType', 'className', ...` | -       |

</Attributes>

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