Command palette

import { useEffect, useState } from 'react';
import { Autocomplete } from '@base-ui/react/autocomplete';
import { Dialog } from '@base-ui/react/dialog';

type Command = { label: string; shortcut?: string; run: () => void };
const POPUP =
  'fixed top-24 left-1/2 w-140 max-w-[calc(100vw-2rem)] -translate-x-1/2 overflow-hidden rounded-xl border bg-background shadow-2xl transition-[opacity,scale] duration-150 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0';

export function CommandPalette({ commands }: { commands: Command[] }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key !== 'k' || !(event.metaKey || event.ctrlKey)) return;
      event.preventDefault();
      setOpen((value) => !value);
    }
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, []);
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger className='flex gap-6 rounded-lg border px-3 py-1.5 text-sm text-muted-foreground'>
        Search <kbd>⌘K</kbd>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className='fixed inset-0 bg-black/40 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0' />
        <Dialog.Popup aria-label='Command palette' className={POPUP}>
          {/* Inline and always open, since the dialog is the popup. */}
          <Autocomplete.Root open inline items={commands} autoHighlight>
            <Autocomplete.Input
              aria-label='Search commands'
              placeholder='Type a command or search…'
              className='h-12 w-full border-b bg-transparent px-4 text-sm outline-none'
            />
            <Autocomplete.Empty className='p-4 text-sm text-muted-foreground empty:p-0'>
              No results.
            </Autocomplete.Empty>
            <Autocomplete.List className='max-h-80 overflow-y-auto p-2 data-empty:p-0'>
              {(command: Command) => (
                <Autocomplete.Item
                  key={command.label}
                  value={command}
                  onClick={() => {
                    command.run();
                    setOpen(false);
                  }}
                  className='flex cursor-default justify-between rounded-lg px-3 py-2 text-sm outline-none select-none data-highlighted:bg-muted'
                >
                  {command.label}
                  <kbd className='text-xs opacity-60'>{command.shortcut}</kbd>
                </Autocomplete.Item>
              )}
            </Autocomplete.List>
          </Autocomplete.Root>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}