function MainComponent() { const [properties, setProperties] = React.useState([]); const handleSearch = (e)=>{ e.preventDefault(); const data = new FormData(e.target); const checkIn = data.get("checkIn"); const checkOut = data.get("checkOut"); const numberOfPeople = data.get("numberOfPeople"); const queryParams = new URLSearchParams({ checkIn, checkOut, numberOfPeople }); fetch(`https://www.bushlodgeproperties.com/mabalingwerentals/api?${queryParams.toString()}`).then((response)=>response.json()).then((data)=>setProperties(data)).catch((error)=>console.error("Error fetching data:", error)); }; const propertyElements = properties.map((property, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${property.image}`, alt: `${property.name} view`, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mt-2", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, property.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, property.details))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto my-4 text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Bushlodge Properties - Vacation Rentals"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded p-6 mb-4", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "checkIn", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Check-in Date"), /*#__PURE__*/ React.createElement("input", { name: "checkIn", type: "date", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "checkOut", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Check-out Date"), /*#__PURE__*/ React.createElement("input", { name: "checkOut", type: "date", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "numberOfPeople", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Number of People"), /*#__PURE__*/ React.createElement("input", { name: "numberOfPeople", type: "number", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { id: "results", className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, propertyElements)); }