61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
|
import type { HTMLAttributes } from "react"
|
||
|
|
|
||
|
|
const macOSSymbols: Record<string, string> = {
|
||
|
|
cmd: "⌘",
|
||
|
|
command: "⌘",
|
||
|
|
opt: "⌥",
|
||
|
|
option: "⌥",
|
||
|
|
alt: "⌥",
|
||
|
|
ctrl: "⌃",
|
||
|
|
control: "⌃",
|
||
|
|
shift: "⇧",
|
||
|
|
enter: "↩",
|
||
|
|
return: "↩",
|
||
|
|
tab: "⇥",
|
||
|
|
esc: "⎋",
|
||
|
|
escape: "⎋",
|
||
|
|
delete: "⌫",
|
||
|
|
backspace: "⌫",
|
||
|
|
forwardDelete: "⌦",
|
||
|
|
up: "↑",
|
||
|
|
down: "↓",
|
||
|
|
left: "←",
|
||
|
|
right: "→",
|
||
|
|
space: "␣",
|
||
|
|
fn: "Fn",
|
||
|
|
globe: "🌐",
|
||
|
|
eject: "⏏",
|
||
|
|
power: "⏻",
|
||
|
|
capslock: "⇪",
|
||
|
|
home: "↖",
|
||
|
|
end: "↘",
|
||
|
|
pageup: "⇞",
|
||
|
|
pagedown: "⇟",
|
||
|
|
clear: "⌧",
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface KbdProps extends HTMLAttributes<HTMLElement> {
|
||
|
|
mac?: keyof typeof macOSSymbols
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Kbd({ children, mac, className = "", ...rest }: KbdProps) {
|
||
|
|
const label = children ?? (mac ? macOSSymbols[mac] : null)
|
||
|
|
if (!label) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<kbd
|
||
|
|
className={`inline-flex items-center justify-center min-w-[1.6em] px-1.5 py-0
|
||
|
|
text-[0.85em] leading-normal font-mono
|
||
|
|
rounded-md border border-b-2
|
||
|
|
border-gray-300 dark:border-gray-600
|
||
|
|
bg-gray-50 dark:bg-gray-800
|
||
|
|
text-gray-700 dark:text-gray-300
|
||
|
|
shadow-[0_1px_1px_rgba(0,0,0,0.075)]
|
||
|
|
align-baseline
|
||
|
|
${className}`.replace(/\s+/g, " ")}
|
||
|
|
{...rest}>
|
||
|
|
{label}
|
||
|
|
</kbd>
|
||
|
|
)
|
||
|
|
}
|