"use client";

import { Kbd, KbdGroup } from "@countryclub/ui-react";

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex items-center gap-2 text-muted-foreground text-sm">
        Search the member directory with
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </div>
      <div className="flex items-center gap-2 text-muted-foreground text-sm">
        Toggle the tee sheet sidebar with
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>B</Kbd>
        </KbdGroup>
      </div>
      <div className="flex items-center gap-2 text-muted-foreground text-sm">
        Confirm a booking with
        <KbdGroup>
          <Kbd>⇧</Kbd>
          <Kbd>⏎</Kbd>
        </KbdGroup>
      </div>
    </div>
  );
}
Kbd

Import

Default
