"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type CommandItem = {
  id: string;
  label: string;
  description?: string;
  shortcut?: string;
  onSelect?: () => void;
};

const defaultCommands: CommandItem[] = [
  {
    id: "new-project",
    label: "Create new project",
    description: "Start a fresh workspace",
    shortcut: "N",
  },
  {
    id: "invite",
    label: "Invite team member",
    description: "Send an invitation",
    shortcut: "I",
  },
  {
    id: "billing",
    label: "Open billing",
    description: "Manage subscription",
    shortcut: "B",
  },
  {
    id: "docs",
    label: "View documentation",
    description: "Browse the guide",
    shortcut: "D",
  },
];

export interface CommandPaletteProps {
  commands?: CommandItem[];
  className?: string;
}

export function CommandPalette({ commands = defaultCommands, className }: CommandPaletteProps) {
  const [isOpen, setIsOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [activeIndex, setActiveIndex] = React.useState(0);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const filtered = React.useMemo(() => {
    const normalized = query.toLowerCase();
    return commands.filter((command) =>
      command.label.toLowerCase().includes(normalized)
    );
  }, [commands, query]);

  const closePalette = React.useCallback(() => {
    setIsOpen(false);
    setQuery("");
    setActiveIndex(0);
  }, []);

  React.useEffect(() => {
    if (!isOpen) {
      return;
    }

    inputRef.current?.focus();

    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        closePalette();
        return;
      }

      if (event.key === "ArrowDown") {
        event.preventDefault();
        setActiveIndex((prev) => (prev + 1) % filtered.length);
      }

      if (event.key === "ArrowUp") {
        event.preventDefault();
        setActiveIndex((prev) => (prev === 0 ? filtered.length - 1 : prev - 1));
      }

      if (event.key === "Enter") {
        event.preventDefault();
        const selected = filtered[activeIndex];
        if (selected) {
          selected.onSelect?.();
          closePalette();
        }
      }
    };

    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [activeIndex, closePalette, filtered, isOpen]);

  React.useEffect(() => {
    const handleGlobal = (event: KeyboardEvent) => {
      const isCmdK = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k";
      if (isCmdK) {
        event.preventDefault();
        setIsOpen(true);
      }
    };

    window.addEventListener("keydown", handleGlobal);
    return () => window.removeEventListener("keydown", handleGlobal);
  }, []);

  return (
    <div className={cn("relative", className)}>
      <button
        type="button"
        onClick={() => setIsOpen(true)}
        className="rounded-lg border border-border bg-card px-4 py-2 text-sm text-foreground shadow-sm transition hover:bg-muted"
      >
        Open command palette
        <span className="ml-2 rounded border border-border bg-background px-2 py-0.5 text-xs text-muted-foreground">
          Cmd + K
        </span>
      </button>

      {isOpen ? (
        <div className="fixed inset-0 z-50 flex items-start justify-center bg-background/80 p-4">
          <div className="w-full max-w-xl rounded-2xl border border-border bg-card p-4 shadow-lg">
            <div className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2">
              <svg
                viewBox="0 0 24 24"
                className="h-4 w-4 text-muted-foreground"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.6"
              >
                <circle cx="11" cy="11" r="7" />
                <path d="M16.5 16.5l4 4" strokeLinecap="round" />
              </svg>
              <input
                ref={inputRef}
                value={query}
                onChange={(event) => {
                  setQuery(event.target.value);
                  setActiveIndex(0);
                }}
                placeholder="Search commands"
                className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
              />
            </div>

            <div className="mt-4 space-y-2">
              {filtered.length === 0 ? (
                <p className="rounded-lg border border-dashed border-border bg-background px-4 py-6 text-sm text-muted-foreground">
                  No results. Try a different keyword.
                </p>
              ) : (
                filtered.map((command, index) => (
                  <button
                    key={command.id}
                    type="button"
                    onMouseEnter={() => setActiveIndex(index)}
                    onClick={() => {
                      command.onSelect?.();
                      closePalette();
                    }}
                    className={cn(
                      "flex w-full items-center justify-between rounded-lg border border-border px-4 py-3 text-left text-sm transition",
                      index === activeIndex ? "bg-muted text-foreground" : "bg-background",
                      "hover:bg-muted"
                    )}
                  >
                    <div>
                      <p className="font-medium text-foreground">{command.label}</p>
                      {command.description ? (
                        <p className="text-xs text-muted-foreground">
                          {command.description}
                        </p>
                      ) : null}
                    </div>
                    {command.shortcut ? (
                      <span className="rounded border border-border bg-card px-2 py-1 text-xs text-muted-foreground">
                        {command.shortcut}
                      </span>
                    ) : null}
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}
Command Palette

Dependencies

Files

Installation
