Keyboard shortcut

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

const IS_MAC = /Mac|iPhone|iPad/.test(navigator.userAgent);

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

  useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      // ⌘K on a Mac, Ctrl+K everywhere else.
      const mod = IS_MAC ? event.metaKey : event.ctrlKey;
      if (!mod || event.key.toLowerCase() !== 'k') return;
      event.preventDefault(); // only for the combination we handle
      setOpen((current) => !current);
    }
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, []);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger className='flex w-56 items-center justify-between rounded-lg border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted'>
        Search
        <kbd className='rounded border bg-muted px-1.5 font-sans text-xs'>
          {IS_MAC ? '⌘' : 'Ctrl'} K
        </kbd>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className='fixed inset-0 bg-black/30 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0' />
        {/* Esc closes it; Base UI handles that. */}
        <Dialog.Popup className='fixed top-24 left-1/2 w-full max-w-lg -translate-x-1/2 rounded-xl border bg-background p-2 shadow-xl transition-[opacity,scale] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0'>
          <Dialog.Title className='sr-only'>Search</Dialog.Title>
          <input
            placeholder='Search projects and commands'
            className='w-full bg-transparent px-3 py-2 text-sm outline-none'
          />
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}