Keyboard Shortcut

import { KeyboardShortcut } from "@/components/ui/keyboard-shortcut";

export default function Example() {
  return <KeyboardShortcut />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const KeyboardShortcut = forwardRef(({ className, keys = [], ...props }, ref) => (
  <span ref={ref} className={cn("inline-flex items-center gap-0.5", className)} {...props}>
    {keys.map((k, i) => (
      <span key={i}>
        <kbd className="inline-flex h-5 min-w-[20px] items-center justify-center rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">{k}</kbd>
        {i < keys.length - 1 && <span className="mx-0.5 text-xs text-muted-foreground">+</span>}
      </span>
    ))}
  </span>
));
KeyboardShortcut.displayName = "KeyboardShortcut";

export { KeyboardShortcut };