Upload components/SearchForm.jsx with huggingface_hub

components/SearchForm.jsx

@@ -1,62 +1,113 @@
 import { useState } from 'react';
-import { FiSearch } from 'react-icons/fi';
+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 });
+      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>
-          <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 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>
+            <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>
 
-        <button
-          type="submit"
-          className="w-full bg-primary hover:bg-secondary text-white font-medium py-2 px-4 rounded-md transition duration-200"
-        >
-          Pesquisar Agentes Públicos
-        </button>
+        {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>
   );