Kbd

import { Kbd } from "@/components/ui/kbd"

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Kbd>⌘ K</Kbd>
        <Kbd>⌥ C</Kbd>
        <Kbd>⇧ E</Kbd>
        <Kbd>⌃ L</Kbd>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <Kbd>F1</Kbd>
        <Kbd>F2</Kbd>
        <Kbd>F12</Kbd>
        <Kbd>Esc</Kbd>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <Kbd>←</Kbd>
        <Kbd>↑</Kbd>
        <Kbd>→</Kbd>
        <Kbd>↓</Kbd>
      </div>

      <div className="text-center">
        <p className="text-muted-foreground flex gap-1 text-sm">
          Press <Kbd>⌘ K</Kbd> to open the command palette
        </p>
      </div>
    </div>
  )
}

import { Kbd } from "@/components/ui/kbd"
import { Separator } from "@/components/ui/separator"

export function KbdShortcuts() {
  return (
    <div className="space-y-4">
      <div className="text-center">
        <h3 className="text-lg font-semibold">Keyboard Shortcuts</h3>
        <p className="text-muted-foreground text-sm">
          Common keyboard shortcuts for your application
        </p>
      </div>

      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-sm">Open command palette</span>
          <div className="flex items-center gap-1">
            <Kbd>⌘ K</Kbd>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm">Quick search</span>
          <div className="flex items-center gap-1">
            <Kbd>⌘ S</Kbd>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm">Toggle sidebar</span>
          <div className="flex items-center gap-1">
            <Kbd>⌘ B</Kbd>
          </div>
        </div>

        <Separator />
      </div>
    </div>
  )
}