Command Palette

"use client";
import { useEffect, useState } from "react";
import { Search, ArrowRight } from "lucide-react";

type State = "closed" | "open" | "filtered" | "no-results";

const COMMANDS = [
{ icon: "📁", title: "新增專案", shortcut: "N" },
{ icon: "🔍", title: "搜尋檔案", shortcut: "F" },
{ icon: "⚙️", title: "開啟設定", shortcut: "," },
{ icon: "🎨", title: "切換主題", shortcut: "T" },
{ icon: "🚀", title: "Deploy 到 production", shortcut: "D" },
];

export function CommandPalette({ state = "open" }: { state?: State }) {
const [open, setOpen] = useState(state !== "closed");
const [query, setQuery] = useState("");

useEffect(() => {
  setOpen(state !== "closed");
  if (state === "filtered") setQuery("deploy");
  else if (state === "no-results") setQuery("xyzzy");
  else setQuery("");
}, [state]);

const filtered = query
  ? COMMANDS.filter((c) => c.title.toLowerCase().includes(query.toLowerCase()))
  : COMMANDS;

return (
  <div className="relative grid h-[320px] w-full max-w-md place-items-center rounded-lg border border-border bg-background/30">
    {!open && (
      <button
        onClick={() => setOpen(true)}
        className="rounded-md border border-border bg-background/50 px-3 py-1.5 font-mono text-xs hover:border-lab-accent"
      >
        ⌘K 開啟
      </button>
    )}
    {open && (
      <>
        <div onClick={() => setOpen(false)} className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
        <div className="absolute left-1/2 top-8 w-[88%] -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-150">
          <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
            <Search className="h-4 w-4 text-muted-foreground" />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="輸入命令⋯"
              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
              autoFocus
            />
            <kbd className="rounded border border-border bg-background/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
              ESC
            </kbd>
          </div>
          <div className="max-h-56 overflow-y-auto p-1">
            {filtered.length === 0 ? (
              <p className="py-6 text-center font-mono text-xs text-muted-foreground">
                找不到命令「{query}」
              </p>
            ) : (
              filtered.map((c, i) => (
                <button
                  key={i}
                  className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-lab-accent/10"
                >
                  <span>{c.icon}</span>
                  <span className="flex-1">{c.title}</span>
                  <kbd className="font-mono text-[10px] text-muted-foreground">⌘{c.shortcut}</kbd>
                  <ArrowRight className="h-3 w-3 text-muted-foreground/40" />
                </button>
              ))
            )}
          </div>
        </div>
      </>
    )}
  </div>
);
}