// Plaaayground v2 — SearchBar
// Blueprint: 03 — Input with search icon and keyboard shortcut hint

import { useState, useRef, useEffect } from "react";
import { Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SearchBarProps {
  placeholder?: string;
  shortcut?: string;
  value?: string;
  onSearch?: (query: string) => void;
  onShortcutClick?: () => void;
  className?: string;
}

export function SearchBar({
  placeholder = "Search...",
  shortcut = "K",
  value: controlledValue,
  onSearch,
  onShortcutClick,
  className,
}: SearchBarProps) {
  const [internalValue, setInternalValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
  const value = controlledValue ?? internalValue;

  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcut.toLowerCase()) {
        e.preventDefault();
        if (onShortcutClick) {
          onShortcutClick();
        } else {
          inputRef.current?.focus();
        }
      }
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [shortcut, onShortcutClick]);

  return (
    <div
      className={cn(
        "flex items-center gap-2 bg-secondary/50 border border-border px-3 h-9",
        "focus-within:ring-1 focus-within:ring-primary/20 focus-within:ring-offset-1 focus-within:border-primary/30",
        "transition-all",
        className
      )}
    >
      <Search className="w-4 h-4 text-muted-foreground flex-shrink-0" />
      <input
        ref={inputRef}
        type="text"
        value={value}
        onChange={(e) => {
          setInternalValue(e.target.value);
          onSearch?.(e.target.value);
        }}
        placeholder={placeholder}
        className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
      />
      <kbd className="hidden sm:inline-flex items-center gap-0.5 border bg-muted px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground">
        <span className="text-xs">{navigator.platform?.includes("Mac") ? "\u2318" : "Ctrl"}</span>
        {shortcut}
      </kbd>
    </div>
  );
}
SearchBar

Source Code
