"use client";

import { useEffect, useRef, useState } from "react";

const ITEMS = [
  { group: "Pages", items: [
    { label: "Inbox", icon: "✉", shortcut: "G I" },
    { label: "Today", icon: "✦", shortcut: "G T" },
    { label: "Projects", icon: "▤", shortcut: "G P" },
  ]},
  { group: "Actions", items: [
    { label: "Create new task", icon: "＋", shortcut: "N" },
    { label: "Invite teammate", icon: "◉", shortcut: "I" },
    { label: "Switch workspace", icon: "⇅", shortcut: "⌘ \\" },
  ]},
];

export function CommandPaletteNavbar() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open) inputRef.current?.focus();
  }, [open]);

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((v) => !v);
      }
      if (e.key === "Escape") setOpen(false);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const filtered = ITEMS.map((g) => ({
    ...g,
    items: g.items.filter((i) => i.label.toLowerCase().includes(q.toLowerCase())),
  })).filter((g) => g.items.length);

  return (
    <div className="bg-zinc-950 text-zinc-100 antialiased font-sans" style={{ minHeight: 460 }}>
      <header className="border-b border-zinc-800/80">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-5">
          <a href="#" className="flex items-center gap-2 text-[14.5px] font-semibold">
            <span aria-hidden className="grid h-7 w-7 place-items-center rounded-md bg-zinc-100 text-zinc-900 text-[12px] font-bold">P</span>
            Polar
          </a>

          <button
            type="button"
            onClick={() => setOpen(true)}
            className="ml-2 flex flex-1 max-w-md items-center gap-3 rounded-lg border border-zinc-800 bg-zinc-900/80 px-3 py-1.5 text-[13px] text-zinc-400 hover:border-zinc-700 hover:text-zinc-200 transition-colors focus-visible:outline-none focus-visible:border-zinc-500"
            aria-label="Open command palette"
          >
            <span aria-hidden>⌕</span>
            <span>Jump to anywhere…</span>
            <span className="ml-auto inline-flex items-center gap-1">
              <kbd className="rounded border border-zinc-700 bg-zinc-800 px-1 text-[10px] text-zinc-400">⌘</kbd>
              <kbd className="rounded border border-zinc-700 bg-zinc-800 px-1 text-[10px] text-zinc-400">K</kbd>
            </span>
          </button>

          <nav aria-label="Primary" className="ml-auto hidden md:flex items-center gap-1 text-[13px]">
            <a href="#docs" className="rounded-md px-2.5 py-1.5 text-zinc-400 hover:text-zinc-100">Docs</a>
            <a href="#changelog" className="rounded-md px-2.5 py-1.5 text-zinc-400 hover:text-zinc-100">Changelog</a>
            <a href="#login" className="rounded-md px-2.5 py-1.5 text-zinc-400 hover:text-zinc-100">Sign in</a>
          </nav>
        </div>
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-8">
        <p className="text-[11.5px] uppercase tracking-[0.18em] text-zinc-500">
          Hit ⌘K from anywhere
        </p>
        <h1 className="mt-3 max-w-xl text-[26px] font-semibold tracking-tight">
          Keyboard-first navigation, by design.
        </h1>
      </div>

      {open && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Command palette"
          className="fixed inset-0 z-50 grid place-items-start pt-24"
          style={{ position: "absolute", inset: 0 }}
        >
          <button
            type="button"
            aria-label="Close"
            onClick={() => setOpen(false)}
            className="absolute inset-0 bg-zinc-950/70 backdrop-blur-sm"
          />
          <div className="relative mx-auto w-full max-w-lg rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl overflow-hidden">
            <div className="flex items-center gap-3 border-b border-zinc-800 px-4 py-3">
              <span aria-hidden className="text-zinc-500">⌕</span>
              <input
                ref={inputRef}
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="Type a command or search…"
                className="w-full bg-transparent text-[14px] outline-none placeholder:text-zinc-500"
              />
              <kbd className="rounded border border-zinc-700 bg-zinc-800 px-1.5 text-[10px] text-zinc-400">esc</kbd>
            </div>
            <div className="max-h-72 overflow-auto p-1.5">
              {filtered.length === 0 ? (
                <p className="px-3 py-6 text-center text-[13px] text-zinc-500">No matches.</p>
              ) : (
                filtered.map((g) => (
                  <div key={g.group} className="px-1 py-1">
                    <p className="px-2 pb-1 text-[10.5px] font-mono uppercase tracking-[0.16em] text-zinc-500">
                      {g.group}
                    </p>
                    <ul className="grid">
                      {g.items.map((it) => (
                        <li key={it.label}>
                          <button
                            type="button"
                            onClick={() => setOpen(false)}
                            className="flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-left text-[13.5px] hover:bg-zinc-800 focus-visible:outline-none focus-visible:bg-zinc-800"
                          >
                            <span aria-hidden className="w-5 text-center text-zinc-400">{it.icon}</span>
                            <span className="flex-1">{it.label}</span>
                            <kbd className="rounded border border-zinc-700 bg-zinc-800 px-1.5 text-[10px] text-zinc-400">{it.shortcut}</kbd>
                          </button>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
Command Palette Navbar

Keyboard-first navigation, by design.
