File size: 2,369 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { KeybindV2 } from "./keybind-v2"
const docs = `### Overview
Inline keybind indicator that renders one or more keyboard keys in a compact row.
### API
- \`keys\`: Array of key labels to display (e.g. \`["⌘", "K"]\`).
- \`variant\`: "neutral" (gray background) | "ghost" (no background).
- Inherits native div attributes.
### Variants
- **Neutral** — each key sits on a \`#D4D4D4\` pill with darker text.
- **Ghost** — keys render without a background, lighter text color.
`
export default {
title: "UI V2/Keybind",
id: "components-keybind-v2",
component: KeybindV2,
tags: ["autodocs"],
parameters: {
frameHeight: "200px",
frameBackground: "#fff",
docs: {
description: {
component: docs,
},
},
},
args: {
keys: ["⌘"],
variant: "neutral",
},
argTypes: {
keys: {
control: "object",
},
variant: {
control: "select",
options: ["neutral", "ghost"],
},
},
}
export const Playground = {}
export const Variants = {
render: () => (
<div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
<KeybindV2 keys={["⌘"]} variant="neutral" />
<KeybindV2 keys={["⌘"]} variant="ghost" />
</div>
),
}
export const MultipleKeys = {
render: () => (
<div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
<KeybindV2 keys={["⌘", "K"]} variant="neutral" />
<KeybindV2 keys={["⌘", "K"]} variant="ghost" />
</div>
),
}
export const AllExamples = {
render: () => (
<div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
<div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
<span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Neutral</span>
<KeybindV2 keys={["⌘"]} variant="neutral" />
<KeybindV2 keys={["⌘", "K"]} variant="neutral" />
<KeybindV2 keys={["⌘", "⇧", "P"]} variant="neutral" />
</div>
<div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
<span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Ghost</span>
<KeybindV2 keys={["⌘"]} variant="ghost" />
<KeybindV2 keys={["⌘", "K"]} variant="ghost" />
<KeybindV2 keys={["⌘", "⇧", "P"]} variant="ghost" />
</div>
</div>
),
}
|