"use client";

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

export interface SearchInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
  /**
   * Show keyboard shortcut hint (e.g., Cmd+K)
   * @default true
   */
  showShortcut?: boolean;
  /**
   * Custom shortcut text
   * @default "Cmd+K"
   */
  shortcutText?: string;
  /**
   * Callback when shortcut is triggered
   */
  onShortcut?: () => void;
}

export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
  (
    {
      className,
      placeholder = "Search...",
      showShortcut = true,
      shortcutText = "Cmd+K",
      onShortcut,
      ...props
    },
    ref
  ) => {
    const inputRef = React.useRef<HTMLInputElement>(null);
    const combinedRef = useCombinedRefs(ref, inputRef);

    React.useEffect(() => {
      const handleKeyDown = (e: KeyboardEvent) => {
        if ((e.metaKey || e.ctrlKey) && e.key === "k") {
          e.preventDefault();
          inputRef.current?.focus();
          onShortcut?.();
        }
      };

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

    return (
      <div className="relative">
        {/* Search Icon */}
        <svg
          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={2}
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
          />
        </svg>

        <input
          ref={combinedRef}
          type="search"
          className={cn(
            "w-full rounded-lg border border-input bg-background py-2.5 pl-10 pr-14 text-sm text-foreground",
            "placeholder:text-muted-foreground",
            "transition-all duration-200",
            "focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
            "disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
          placeholder={placeholder}
          {...props}
        />

        {/* Keyboard Shortcut Badge */}
        {showShortcut && (
          <kbd
            className={cn(
              "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2",
              "flex items-center gap-0.5 rounded border border-border bg-muted px-1.5 py-0.5",
              "text-[10px] font-medium text-muted-foreground"
            )}
          >
            {shortcutText}
          </kbd>
        )}
      </div>
    );
  }
);

SearchInput.displayName = "SearchInput";

// Helper to combine refs
function useCombinedRefs<T>(
  ...refs: (React.Ref<T> | undefined)[]
): React.RefCallback<T> {
  return React.useCallback(
    (element: T) => {
      refs.forEach((ref) => {
        if (!ref) return;
        if (typeof ref === "function") {
          ref(element);
        } else {
          (ref as React.MutableRefObject<T>).current = element;
        }
      });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    refs
  );
}
Search Input

Dependencies

Files

Installation
