Kbd

import { ArrowUp } from "lucide-react"

import * as Kbd from "@/components/ui/kbd"

export function KbdDemo() {
  return (
    <div className="flex items-center gap-2">
      <Kbd.Group>
        <Kbd.Root>⌘</Kbd.Root>
        <Kbd.Root>K</Kbd.Root>
      </Kbd.Group>
      or
      <Kbd.Root>
        <ArrowUp />
      </Kbd.Root>
    </div>
  )
}

import * as Kbd from "@/components/ui/kbd"

export function KbdOutline() {
  return (
    <div className="flex items-center gap-2">
      <span>Press</span>
      <Kbd.Root appearance="outline">⌘</Kbd.Root>
      <span>+</span>
      <Kbd.Root appearance="outline">K</Kbd.Root>
      <span>to search</span>
    </div>
  )
}

import * as Kbd from "@/components/ui/kbd"

export function KbdMuted() {
  return (
    <div className="flex items-center gap-2">
      <span>Press</span>
      <Kbd.Root appearance="muted">⌘</Kbd.Root>
      <span>+</span>
      <Kbd.Root appearance="muted">K</Kbd.Root>
      <span>to search</span>
    </div>
  )
}

import * as Kbd from "@/components/ui/kbd"

export function KbdGroup() {
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-muted-foreground text-sm">
        Use{" "}
        <Kbd.Group>
          <Kbd.Root>Ctrl</Kbd.Root>
          <Kbd.Root>B</Kbd.Root>
        </Kbd.Group>{" "}
        or{" "}
        <Kbd.Group>
          <Kbd.Root>Ctrl</Kbd.Root>
          <Kbd.Root>K</Kbd.Root>
        </Kbd.Group>{" "}
        to open the command palette
      </p>
    </div>
  )
}

import * as Button from "@/components/ui/button"
import * as Kbd from "@/components/ui/kbd"

export function KbdWithButton() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.Root variant="secondary" appearance="bordered" size="sm">
        Accept
        <Kbd.Root>✓</Kbd.Root>
      </Button.Root>
      <Button.Root variant="secondary" appearance="muted" size="sm">
        Cancel <Kbd.Root>✗</Kbd.Root>
      </Button.Root>
    </div>
  )
}