useHotkeys

"use client";
import { useState } from "react";
import { Group } from "@/ui/group";
import { Button } from "@/ui/button";
import { Kbd, kbdMatcher } from "@/ui/kbd";
import { useHotkeys } from "@/hooks/use-hotkeys";

export function UseHotkeysDemo({ hotKeys = "ctrl+X" }: { hotKeys?: string }) {
  const [open, setOpen] = useState<boolean>(false);

  useHotkeys([[hotKeys, () => setOpen(o => !o)]]);

  const [items, separators] = kbdMatcher(hotKeys);
  const [items2, separators2] = kbdMatcher(["/", "M", "ctrl+X", "ctrl+K", "alt+mod+shift+X"].join("|"));

  return (
    <>
      <Button asChild variant="outline">
        <Group gap={4} className="h-auto w-max">
          <Kbd items={items} separator={index => separators[index]} /> to {open ? "close" : "open"}
        </Group>
      </Button>

      {open && (
        <div role="tooltip" aria-label="modal" className="absolute top-[calc(50%+20px)] rounded-md border bg-background p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100">
          <Group gap={4}>
            <Kbd size="sm" items={items2} separator={index => separators2[index]} />
          </Group>
        </div>
      )}
    </>
  );
}