Kbd

Display keyboard shortcuts and key combinations

"use client";

import {Kbd} from "@/components/ui/heroui-kbd";

export default function InlineUsage() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8 leading-7 antialiased">
    <div className="space-y-4">
      <p className="text-sm">
        Press{" "}
        <Kbd>
          <Kbd.Content>Esc</Kbd.Content>
        </Kbd>{" "}
        to close the dialog.
      </p>
      <p className="text-sm">
        Use{" "}
        <Kbd>
          <Kbd.Abbr keyValue="command">⌘</Kbd.Abbr>
          <Kbd.Content>K</Kbd.Content>
        </Kbd>{" "}
        to open the command palette.
      </p>
      <p className="text-sm">
        Navigate with{" "}
        <Kbd>
          <Kbd.Abbr keyValue="up">↑</Kbd.Abbr>
        </Kbd>{" "}
        and{" "}
        <Kbd>
          <Kbd.Abbr keyValue="down">↓</Kbd.Abbr>
        </Kbd>{" "}
        arrow keys.
      </p>
      <p className="text-sm">
        Save your work with{" "}
        <Kbd>
          <Kbd.Abbr keyValue="command">⌘</Kbd.Abbr>
          <Kbd.Content>S</Kbd.Content>
        </Kbd>{" "}
        regularly.
      </p>
    </div>
    </div>
  );
}

export { InlineUsage };