/
n.sugrobov
/
fakeStore
Обзор
Документация
Войти
/
n.sugrobov
/
fakeStore
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/SearchInput.jsx
50 строк
1 KB
Nikolo
fix filters
09 апр 2025, 19:04
09 апр 2025, 19:04
bc730f8
Код
Авторство
О чём код?
import { useState, useEffect } from 'react'; import useDebounce from '../hooks/useDebounce'; export default function SearchInput({ value, onChange }) { const [displayValue, setDisplayValue] = useState(value); const debouncedValue = useDebounce(displayValue, 500); useEffect(() => { onChange(debouncedValue) }, [debouncedValue, onChange]); const handleClear = () => { setDisplayValue(''); onChange(''); } return ( <div className="relative"> <input type="text" value={displayValue} onChange={(e) => setDisplayValue(e.target.value)} placeholder="Search products..." className="w-full p-2 pl-10 border rounded" /> <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> {displayValue && (<button onClick={handleClear} className="absolute right-2 top-2.5 text-gray-400 hover:text-gray-600" aria-label="Clear search" > <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> </button>)} </div> ) }