Upload components/SearchForm.jsx with huggingface_hub

components/SearchForm.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { FiSearch } from 'react-icons/fi';
+
+export default function SearchForm({ onSearch }) {
+  const [query, setQuery] = useState('');
+  const [locationType, setLocationType] = useState('municipio');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (query.trim()) {
+      onSearch({ query, locationType });
+    }
+  };
+
+  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>
+          <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>
+
+        <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>
+      </form>
+    </div>
+  );
+}