Kbd

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Button } from "@/registry/radix-sera/ui/button"
6import {
7  InputGroup,
8  InputGroupAddon,
9  InputGroupInput,
10} from "@/registry/radix-sera/ui/input-group"
11import { Kbd, KbdGroup } from "@/registry/radix-sera/ui/kbd"
12import {
13  Tooltip,
14  TooltipContent,
15  TooltipTrigger,
16} from "@/registry/radix-sera/ui/tooltip"
17import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
18 
19export default function KbdExample() {
20  return (
21    <ExampleWrapper>
22      <KbdBasic />
23      <KbdModifierKeys />
24      <KbdGroupExample />
25      <KbdArrowKeys />
26      <KbdWithIcons />
27      <KbdWithIconsAndText />
28      <KbdInInputGroup />
29      <KbdInTooltip />
30      <KbdWithSamp />
31    </ExampleWrapper>
32  )
33}
34 
35function KbdBasic() {
36  return (
37    <Example title="Basic">
38      <div className="flex items-center gap-2">
39        <Kbd>Ctrl</Kbd>
40        <Kbd>⌘K</Kbd>
41        <Kbd>Ctrl + B</Kbd>
42      </div>
43    </Example>
44  )
45}
46 
47function KbdModifierKeys() {
48  return (
49    <Example title="Modifier Keys">
50      <div className="flex items-center gap-2">
51        <Kbd>⌘</Kbd>
52        <Kbd>C</Kbd>
53      </div>
54    </Example>
55  )
56}
57 
58function KbdGroupExample() {
59  return (
60    <Example title="KbdGroup">
61      <KbdGroup>
62        <Kbd>Ctrl</Kbd>
63        <Kbd>Shift</Kbd>
64        <Kbd>P</Kbd>
65      </KbdGroup>
66    </Example>
67  )
68}
69 
70function KbdArrowKeys() {
71  return (
72    <Example title="Arrow Keys">
73      <div className="flex items-center gap-2">
74        <Kbd>↑</Kbd>
75        <Kbd>↓</Kbd>
76        <Kbd>←</Kbd>
77        <Kbd>→</Kbd>
78      </div>
79    </Example>
80  )
81}
82 
83function KbdWithIcons() {
84  return (
85    <Example title="With Icons">
86      <KbdGroup>
87        <Kbd>
88          <IconPlaceholder
89            lucide="CircleDashedIcon"
90            tabler="IconCircleDashed"
91            hugeicons="DashedLineCircleIcon"
92            phosphor="CircleDashedIcon"
93            remixicon="RiLoaderLine"
94          />
95        </Kbd>
96        <Kbd>
97          <IconPlaceholder
98            lucide="ArrowLeftIcon"
99            tabler="IconArrowLeft"
100            hugeicons="ArrowLeft01Icon"
101            phosphor="ArrowLeftIcon"
102            remixicon="RiArrowLeftLine"
103          />
104        </Kbd>
105        <Kbd>
106          <IconPlaceholder
107            lucide="ArrowRightIcon"
108            tabler="IconArrowRight"
109            hugeicons="ArrowRight01Icon"
110            phosphor="ArrowRightIcon"
111// … truncated