Initial commit - WhyRating Engine (Google Reviews Scraper)

web/components/taxonomy/TaxonomySearch.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { useCallback, useState, useEffect } from 'react';
+
+interface TaxonomySearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  resultCount?: number;
+}
+
+export default function TaxonomySearch({ value, onChange, resultCount }: TaxonomySearchProps) {
+  const [localValue, setLocalValue] = useState(value);
+
+  // Debounce the search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onChange(localValue);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [localValue, onChange]);
+
+  // Sync external changes
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleClear = useCallback(() => {
+    setLocalValue('');
+    onChange('');
+  }, [onChange]);
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+        <input
+          type="text"
+          value={localValue}
+          onChange={(e) => setLocalValue(e.target.value)}
+          placeholder="Search codes..."
+          className="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-9 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500"
+        />
+        {localValue && (
+          <button
+            onClick={handleClear}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+      {value && resultCount !== undefined && (
+        <div className="absolute right-0 top-full mt-1 text-xs text-gray-500">
+          {resultCount} {resultCount === 1 ? 'match' : 'matches'}
+        </div>
+      )}
+    </div>
+  );
+}