Command Palette

"use client";
import { useEffect, useState } from "react";

export function CommandPalette({ items }: { items: { label: string; run: () => void }[] }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setOpen((o) => !o); }
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const results = items.filter((i) => i.label.toLowerCase().includes(q.toLowerCase()));
  if (!open) {
    return (
      <button onClick={() => setOpen(true)}
        className="flex w-64 items-center gap-2 rounded-xl border border-border bg-surface px-4 py-3 text-sm text-muted-foreground">
        <span>⌘K</span><span className="mx-2 text-border">|</span><span>Search...</span>
      </button>
    );
  }
  return (
    <>
      <div className="fixed inset-0 z-30 bg-black/50" onClick={() => setOpen(false)} />
      <div className="fixed left-1/2 top-24 z-40 w-full max-w-md -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-card shadow-xl">
        <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Type a command..."
          className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none" />
        <div className="max-h-64 overflow-y-auto py-1">
          {results.map((r) => (
            <button key={r.label} onClick={() => { r.run(); setOpen(false); }}
              className="w-full px-4 py-2 text-left text-sm hover:bg-muted">{r.label}</button>
          ))}
          {!results.length && <p className="px-4 py-6 text-center text-sm text-muted-foreground">No results</p>}
        </div>
      </div>
    </>
  );
}