Spaces:
Build error
Build error
File size: 4,464 Bytes
40aa7cc e9fbb6e 40aa7cc e9fbb6e 40aa7cc e9fbb6e 40aa7cc e9fbb6e 40aa7cc e9fbb6e 40aa7cc e9fbb6e 40aa7cc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import { useState } from 'react';
import { FiSearch, FiSettings } from 'react-icons/fi';
export default function SearchForm({ onSearch }) {
const [query, setQuery] = useState('');
const [locationType, setLocationType] = useState('municipio');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [advancedOptions, setAdvancedOptions] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
if (query.trim()) {
onSearch({
query,
locationType,
startDate: startDate || null,
endDate: endDate || null
});
}
};
return (
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label htmlFor="locationType" className="block text-sm font-medium text-gray-700 mb-1">
Tipo de Localização
</label>
<select
id="locationType"
value={locationType}
onChange={(e) => setLocationType(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
>
<option value="municipio">Município</option>
<option value="cidade">Cidade</option>
<option value="estado">Estado</option>
</select>
</div>
<div>
<label htmlFor="query" className="block text-sm font-medium text-gray-700 mb-1">
Nome da Localização
</label>
<div className="relative">
<input
type="text"
id="query"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={`Digite o nome do ${locationType}`}
className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
required
/>
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<FiSearch className="h-5 w-5 text-gray-400" />
</div>
</div>
</div>
</div>
{advancedOptions && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label htmlFor="startDate" className="block text-sm font-medium text-gray-700 mb-1">
Data Inicial
</label>
<input
type="date"
id="startDate"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
/>
</div>
<div>
<label htmlFor="endDate" className="block text-sm font-medium text-gray-700 mb-1">
Data Final
</label>
<input
type="date"
id="endDate"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
/>
</div>
</div>
)}
<div className="flex flex-col sm:flex-row gap-4">
<button
type="button"
onClick={() => setAdvancedOptions(!advancedOptions)}
className="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
>
<FiSettings className="mr-2" />
{advancedOptions ? 'Ocultar' : 'Opções Avançadas'}
</button>
<button
type="submit"
className="flex-1 bg-primary hover:bg-secondary text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center"
>
<FiSearch className="mr-2" />
Pesquisar Agentes Públicos
</button>
</div>
</form>
</div>
);
} |