/
aaronair
/
Test_task_rt_solution
Обзор
Документация
Войти
/
aaronair
/
Test_task_rt_solution
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/SearchInput.tsx
55 строк
2 KB
Ilikedrinkpivo
first_commit
28 май 2026, 14:51
28 май 2026, 14:51
b4498fc
Код
Авторство
О чём код?
import { useEffect, useState } from "react"; interface Props { value: string; onChange: (value: string) => void; placeholder?: string; debounceMs?: number; } export function SearchInput({ value, onChange, placeholder = "Поиск...", debounceMs = 250, }: Props) { const [local, setLocal] = useState(value); useEffect(() => { setLocal(value); }, [value]); useEffect(() => { if (local === value) return; const t = setTimeout(() => onChange(local), debounceMs); return () => clearTimeout(t); // eslint-disable-next-line react-hooks/exhaustive-deps }, [local, debounceMs]); return ( <div className="relative w-full max-w-md"> <svg viewBox="0 0 24 24" className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-500 pointer-events-none" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <circle cx="11" cy="11" r="7" /> <path d="m21 21-4.3-4.3" /> </svg> <input type="search" value={local} onChange={(e) => setLocal(e.target.value)} placeholder={placeholder} className="w-full rounded-lg border border-ink-300/60 bg-surface-card pl-9 pr-3 py-2 text-sm placeholder:text-ink-500 focus:border-primary-500 focus:ring-0 focus-visible:ring-0 focus-visible:border-primary-500 outline-none transition-colors" /> </div> ); }