CommandPalette

import { CommandPalette } from "@compa11y/react";

import { useState, useEffect } from "react";
import { CommandPalette, Button } from "@compa11y/react";

function AppCommandPalette() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setOpen(true);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Search commands... (Ctrl+K)
      </Button>

      <CommandPalette open={open} onOpenChange={setOpen}>
        <CommandPalette.Input placeholder="Search actions..." />
        <CommandPalette.List>
          <CommandPalette.Group heading="Navigation">
            <CommandPalette.Item onSelect={() => console.log("home")}>
              Go to Home
            </CommandPalette.Item>
            <CommandPalette.Item onSelect={() => console.log("settings")}>
              Go to Settings
            </CommandPalette.Item>
          </CommandPalette.Group>
          <CommandPalette.Group heading="Actions">
            <CommandPalette.Item onSelect={() => console.log("new")}>
              Create New Document
            </CommandPalette.Item>
          </CommandPalette.Group>
          <CommandPalette.Empty>No results found.</CommandPalette.Empty>
        </CommandPalette.List>
      </CommandPalette>
    </>
  );
}