function MainComponent() { const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const parkplaceData = { name: formData.get('parkplace-name'), address: formData.get('parkplace-address'), description: formData.get('parkplace-description'), price: formData.get('parkplace-price') }; fetch('/api/parkplace', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(parkplaceData) }).then((response)=>response.json()).then((data)=>{ console.log('Success:', data); }).catch((error)=>{ console.error('Error:', error); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Rent My Parkplace"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-300", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./map-placeholder.png", alt: "Map showing the parkplace location based on GPS", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg space-y-4 bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "parkplace-name", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Parkplace Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "parkplace-name", name: "parkplace-name", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "parkplace-address", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Parkplace Address"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "parkplace-address", name: "parkplace-address", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "parkplace-description", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { id: "parkplace-description", name: "parkplace-description", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "parkplace-price", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Price per Hour"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "parkplace-price", name: "parkplace-price", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 text-white bg-blue-600 rounded-md font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Submit"))); }