62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|