function MainComponent() { const [formData, setFormData] = React.useState({ photo: '', video: '', area: '', bedrooms: '', bathrooms: '', parkingSpaces: '', description: '', price: '', purpose: '', neighborhood: '', city: '', state: '' }); const [properties, setProperties] = React.useState([]); const [filters, setFilters] = React.useState({ priceFilter: '', bedroomsFilter: '', bathroomsFilter: '', parkingSpacesFilter: '', purposeFilter: '', cityFilter: '', stateFilter: '', neighborhoodFilter: '' }); function handleChange(event) { const { name, value, type, files } = event.target; if (type === "file") { setFormData((prevFormData)=>({ ...prevFormData, [name]: files[0] })); } else { setFormData((prevFormData)=>({ ...prevFormData, [name]: value })); } } function handleFilterChange(event) { const { name, value } = event.target; setFilters((prevFilters)=>({ ...prevFilters, [name]: value })); } function handleSubmit(event) { event.preventDefault(); setProperties([ ...properties, formData ]); setFormData({ photo: '', video: '', area: '', bedrooms: '', bathrooms: '', parkingSpaces: '', description: '', price: '', purpose: '', neighborhood: '', city: '', state: '' }); } const filteredProperties = properties.filter((property)=>{ return (!filters.priceFilter || property.price === filters.priceFilter) && (!filters.bedroomsFilter || property.bedrooms === filters.bedroomsFilter) && (!filters.bathroomsFilter || property.bathrooms === filters.bathroomsFilter) && (!filters.parkingSpacesFilter || property.parkingSpaces === filters.parkingSpacesFilter) && (!filters.purposeFilter || property.purpose === filters.purposeFilter) && (!filters.cityFilter || property.city === filters.cityFilter) && (!filters.stateFilter || property.state === filters.stateFilter) && (!filters.neighborhoodFilter || property.neighborhood === filters.neighborhoodFilter); }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "price", className: "block font-roboto uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Valor do Imóvel"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "price", name: "price", type: "number", placeholder: "Valor", value: formData.price, onChange: handleChange, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "purpose", className: "block font-roboto uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Finalidade"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", id: "purpose", name: "purpose", value: formData.purpose, onChange: handleChange, __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "Selecione"), /*#__PURE__*/ React.createElement("option", { value: "sale", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Venda"), /*#__PURE__*/ React.createElement("option", { value: "rent", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Locação"))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-3", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "neighborhood", className: "block font-roboto uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Bairro"), /*#__PURE__*/ React.createElement("input", { className: "block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "neighborhood", name: "neighborhood", type: "text", placeholder: "Bairro", value: formData.neighborhood, onChange: handleChange, __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-3", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "city", className: "block font-roboto uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Cidade"), /*#__PURE__*/ React.createElement("input", { className: "block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "city", name: "city", type: "text", placeholder: "Cidade", value: formData.city, onChange: handleChange, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 px-3", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "state", className: "block font-roboto uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Estado"), /*#__PURE__*/ React.createElement("input", { className: "block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "state", name: "state", type: "text", placeholder: "Estado", value: formData.state, onChange: handleChange, __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this })); }