function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [query, setQuery] = React.useState([]); React.useEffect(()=>{ const fetchData = async ()=>{ if (query.length) { const queryParams = new URLSearchParams(query); const response = await fetch(`/api/soil-analysis?${queryParams}`, { method: 'GET' }); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } } }; fetchData(); }, [ query ]); const handleFormSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const queryData = [ { key: 'ph', value: formData.get('ph') || '0' }, { key: 'organicMatter', value: formData.get('organicMatter') || '0' } ]; setQuery(queryData.map((q)=>`${q.key}=${encodeURIComponent(q.value)}`)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex items-center justify-center", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-full max-w-[600px] mx-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#333] mb-6 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Interpretação de Análise de Solo"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ph", className: "block mb-2 text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "pH"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "ph", name: "ph", step: "0.01", className: "border border-[#ddd] rounded-md w-full p-3 text-base", placeholder: "Insira o valor do pH", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "organicMatter", className: "block mb-2 text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Matéria Orgânica (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "organicMatter", name: "organicMatter", step: "0.01", className: "border border-[#ddd] rounded-md w-full p-3 text-base", placeholder: "Insira o percentual de matéria orgânica", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4CAF50] text-white p-4 rounded-md font-roboto text-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Interpretar")), /*#__PURE__*/ React.createElement("ul", { className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 bg-white border border-[#ddd] rounded-md", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto mt-2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, result.description)))))); }