feat: componente SearchBar con debounce y clear

Input de busqueda con icono, debounce configurable y boton de limpiar. Exportado desde index.ts del barrel de UI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 15:02:29 +02:00
parent 145a6fce8f
commit 74b4c40f18
3 changed files with 133 additions and 0 deletions
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cn } from "../core/cn"
+import { Search, X } from "lucide-react"
+
+interface SearchBarProps {
+  /** Called with the debounced search query */
+  onSearch: (query: string) => void
+  /** Placeholder text */
+  placeholder?: string
+  /** Debounce delay in ms (default 300) */
+  debounceMs?: number
+  /** Additional CSS classes for the outer wrapper */
+  className?: string
+}
+
+function SearchBar({
+  onSearch,
+  placeholder = "Search...",
+  debounceMs = 300,
+  className,
+}: SearchBarProps) {
+  const [query, setQuery] = React.useState("")
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const onSearchRef = React.useRef(onSearch)
+  onSearchRef.current = onSearch
+
+  React.useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      onSearchRef.current(query)
+    }, debounceMs)
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [query, debounceMs])
+
+  return (
+    <div
+      className={cn(
+        "flex flex-1 items-center gap-2 rounded border border-border bg-input px-2 py-1",
+        className,
+      )}
+    >
+      <Search size={14} className="text-muted-foreground shrink-0" />
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={placeholder}
+        className="flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+      />
+      {query && (
+        <button
+          onClick={() => setQuery("")}
+          className="p-0.5 text-muted-foreground hover:text-foreground"
+          aria-label="Clear search"
+        >
+          <X size={12} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { SearchBar }
+export type { SearchBarProps }