Merge pull request #951 from tszhong0411/pack-21-add-kbd

Add kbd component

.changeset/chilled-cycles-begin.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add kbd component

apps/docs/src/app/ui/components/kbd.mdx

@@ -0,0 +1,16 @@
+---
+title: Kbd
+description: The Kbd component is used to represent user input.
+---
+
+<ComponentPreview name='kbd/kbd' />
+
+## Usage
+
+```tsx
+import { Kbd } from '@tszhong0411/ui'
+```
+
+```tsx
+<Kbd keys={['command']}>K</Kbd>
+```

apps/docs/src/components/demos/kbd/kbd.tsx

@@ -0,0 +1,13 @@
+import { Kbd } from '@tszhong0411/ui'
+
+const KbdDemo = () => {
+  return (
+    <div className='flex gap-4'>
+      <Kbd keys={['command']}>K</Kbd>
+      <Kbd keys={['command', 'shift']}>N</Kbd>
+      <Kbd keys={['option', 'command']}>P</Kbd>
+    </div>
+  )
+}
+
+export default KbdDemo

apps/docs/src/config/links.ts

@@ -118,6 +118,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/input',
         text: 'Input'
       },
+      {
+        href: '/ui/components/kbd',
+        text: 'Kbd'
+      },
       {
         href: '/ui/components/label',
         text: 'Label'

packages/ui/src/index.ts

@@ -21,6 +21,7 @@ export * from './dropdown-menu'
 export * from './files'
 export * from './form'
 export * from './input'
+export * from './kbd'
 export * from './label'
 export * from './link'
 export * from './logo'

packages/ui/src/kbd.tsx

@@ -0,0 +1,94 @@
+import { cn } from '@tszhong0411/utils'
+
+/**
+ * Inspired by: https://github.com/nextui-org/nextui/blob/93f68727c1cef10d8745d22099cf27011fd4dce3/packages/components/kbd/src/utils.ts
+ */
+type KbdKey =
+  | 'command'
+  | 'shift'
+  | 'ctrl'
+  | 'option'
+  | 'enter'
+  | 'delete'
+  | 'escape'
+  | 'tab'
+  | 'capsLock'
+  | 'up'
+  | 'right'
+  | 'down'
+  | 'left'
+  | 'pageup'
+  | 'pagedown'
+  | 'home'
+  | 'end'
+  | 'help'
+  | 'space'
+
+const kbdKeysMap: Record<KbdKey, string> = {
+  command: '⌘',
+  shift: '⇧',
+  ctrl: '⌃',
+  option: '⌥',
+  enter: '↵',
+  delete: '⌫',
+  escape: '⎋',
+  tab: '⇥',
+  capsLock: '⇪',
+  up: '↑',
+  right: '→',
+  down: '↓',
+  left: '←',
+  pageup: '⇞',
+  pagedown: '⇟',
+  home: '↖',
+  end: '↘',
+  help: '?',
+  space: '␣'
+}
+
+const kbdKeysLabelMap: Record<KbdKey, string> = {
+  command: 'Command',
+  shift: 'Shift',
+  ctrl: 'Control',
+  option: 'Option',
+  enter: 'Enter',
+  delete: 'Delete',
+  escape: 'Escape',
+  tab: 'Tab',
+  capsLock: 'Caps Lock',
+  up: 'Up',
+  right: 'Right',
+  down: 'Down',
+  left: 'Left',
+  pageup: 'Page Up',
+  pagedown: 'Page Down',
+  home: 'Home',
+  end: 'End',
+  help: 'Help',
+  space: 'Space'
+}
+
+type KbdProps = {
+  keys?: KbdKey[]
+} & React.ComponentProps<'kbd'>
+
+export const Kbd = (props: KbdProps) => {
+  const { children, keys, className, ...rest } = props
+
+  return (
+    <kbd
+      className={cn(
+        'bg-muted inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-sm shadow-sm',
+        className
+      )}
+      {...rest}
+    >
+      {keys?.map((key) => (
+        <abbr key={key} title={kbdKeysLabelMap[key]} className='no-underline'>
+          {kbdKeysMap[key]}
+        </abbr>
+      ))}
+      {children}
+    </kbd>
+  )
+}