"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface SpotlightResult {
  id: string;
  label: string;
  description?: string;
  category?: string;
  icon?: React.ReactNode;
}

export interface SpotlightSearchProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "results"> {
  results: SpotlightResult[];
  placeholder?: string;
  emptyText?: string;
  triggerLabel?: string;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  onSelect?: (result: SpotlightResult) => void;
}

export function SpotlightSearch({
  results,
  placeholder = "Search for actions, pages, and docs",
  emptyText = "No matches",
  triggerLabel = "Open search",
  open,
  onOpenChange,
  onSelect,
  className,
  ...props
}: SpotlightSearchProps) {
  const [internalOpen, setInternalOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [activeIndex, setActiveIndex] = React.useState(0);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const isOpen = open ?? internalOpen;

  const setOpen = React.useCallback(
    (value: boolean) => {
      if (open === undefined) {
        setInternalOpen(value);
      }
      onOpenChange?.(value);
    },
    [open, onOpenChange]
  );

  React.useEffect(() => {
    const handleShortcut = (event: KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setOpen(!isOpen);
      }
    };

    document.addEventListener("keydown", handleShortcut);
    return () => document.removeEventListener("keydown", handleShortcut);
  }, [isOpen, setOpen]);

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

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, setOpen]);

  React.useEffect(() => {
    if (isOpen) {
      setQuery("");
      setActiveIndex(0);
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [isOpen]);

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

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [isOpen]);

  const filteredResults = React.useMemo(() => {
    const search = query.trim().toLowerCase();
    if (!search) return results;
    return results.filter((result) => {
      const target = `${result.label} ${result.description ?? ""} ${result.category ?? ""}`
        .toLowerCase()
        .trim();
      return target.includes(search);
    });
  }, [query, results]);

  const groupedResults = React.useMemo(() => {
    return filteredResults.reduce<Record<string, SpotlightResult[]>>((acc, result) => {
      const category = result.category ?? "Results";
      if (!acc[category]) acc[category] = [];
      acc[category].push(result);
      return acc;
    }, {});
  }, [filteredResults]);

  const flatResults = React.useMemo(() => {
    return Object.values(groupedResults).flat();
  }, [groupedResults]);

  React.useEffect(() => {
    if (activeIndex >= flatResults.length) {
      setActiveIndex(0);
    }
  }, [activeIndex, flatResults.length]);

  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (!flatResults.length) return;
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActiveIndex((prev) => (prev + 1) % flatResults.length);
    }
    if (event.key === "ArrowUp") {
      event.preventDefault();
      setActiveIndex((prev) => (prev - 1 + flatResults.length) % flatResults.length);
    }
    if (event.key === "Enter") {
      event.preventDefault();
      const selected = flatResults[activeIndex];
      if (selected) {
        onSelect?.(selected);
        setOpen(false);
      }
    }
  };

  let renderIndex = -1;

  return (
    <div className={cn("inline-flex", className)} {...props}>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(
          "inline-flex items-center gap-2 rounded-lg border border-border bg-card",
          "px-3 py-2 text-sm font-medium text-foreground shadow-sm",
          "transition hover:bg-muted",
          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
        )}
      >
        <SearchIcon className="h-4 w-4 text-muted-foreground" />
        {triggerLabel}
        <span className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
          ⌘K
        </span>
      </button>

      <div
        className={cn(
          "fixed inset-0 z-50 transition",
          isOpen ? "pointer-events-auto" : "pointer-events-none"
        )}
        aria-hidden={!isOpen}
      >
        <div
          className={cn(
            "absolute inset-0 bg-background/90 transition-opacity",
            isOpen ? "opacity-100" : "opacity-0"
          )}
          onClick={() => setOpen(false)}
        />

        <div className="absolute inset-0 flex items-start justify-center px-6 py-16">
          <div className="w-full max-w-3xl rounded-2xl border border-border bg-card shadow-lg">
            <div className="flex items-center gap-3 border-b border-border px-5 py-4">
              <SearchIcon className="h-5 w-5 text-muted-foreground" />
              <input
                ref={inputRef}
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                onKeyDown={handleInputKeyDown}
                placeholder={placeholder}
                className={cn(
                  "w-full bg-transparent text-sm text-foreground outline-none",
                  "placeholder:text-muted-foreground"
                )}
              />
            </div>

            <div className="max-h-[60vh] overflow-y-auto p-4">
              {flatResults.length === 0 ? (
                <p className="text-sm text-muted-foreground">{emptyText}</p>
              ) : (
                <div className="space-y-4">
                  {Object.entries(groupedResults).map(([category, items]) => (
                    <div key={category} className="space-y-2">
                      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                        {category}
                      </p>
                      <div className="space-y-1">
                        {items.map((item) => {
                          renderIndex += 1;
                          const isActive = renderIndex === activeIndex;
                          return (
                            <button
                              key={item.id}
                              type="button"
                              onClick={() => {
                                onSelect?.(item);
                                setOpen(false);
                              }}
                              className={cn(
                                "flex w-full items-center gap-3 rounded-xl border border-border px-3 py-2 text-left",
                                "transition",
                                isActive ? "bg-muted" : "bg-transparent",
                                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
                              )}
                            >
                              <span className="text-primary">
                                {item.icon ?? <ResultIcon className="h-4 w-4" />}
                              </span>
                              <span className="flex-1">
                                <span className="block text-sm font-medium text-foreground">
                                  {item.label}
                                </span>
                                {item.description ? (
                                  <span className="block text-xs text-muted-foreground">
                                    {item.description}
                                  </span>
                                ) : null}
                              </span>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  );
}

function ResultIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M9 18h6" />
      <path d="M10 22h4" />
      <path d="M12 2a7 7 0 0 0-4 12c.8.6 1.4 1.4 1.7 2.4L10 18h4l.3-1.6c.3-1 1-1.8 1.7-2.4a7 7 0 0 0-4-12" />
    </svg>
  );
}
Spotlight Search

Dependencies

Files

Installation
