function MainComponent() { const [formData, setFormData] = React.useState({ username: '', email: '', password: '', bio: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f8efd4] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-md rounded-lg shadow-xl p-8 border-2 border-[#d9a066]", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-5xl text-center text-[#800000] mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "💕 Tunisian Love"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "text-lg font-semibold text-[#800000]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "username", className: "w-full p-2 border border-[#cc7722] rounded mt-1 bg-[#fffaf0]", value: formData.username, onChange: handleInputChange, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "text-lg font-semibold text-[#800000]", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", className: "w-full p-2 border border-[#cc7722] rounded mt-1 bg-[#fffaf0]", value: formData.email, onChange: handleInputChange, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "text-lg font-semibold text-[#800000]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", id: "password", className: "w-full p-2 border border-[#cc7722] rounded mt-1 bg-[#fffaf0]", value: formData.password, onChange: handleInputChange, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "bio", className: "text-lg font-semibold text-[#800000]", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Bio"), /*#__PURE__*/ React.createElement("textarea", { name: "bio", id: "bio", rows: "3", className: "w-full p-2 border border-[#cc7722] rounded mt-1 bg-[#fffaf0]", value: formData.bio, onChange: handleInputChange, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#800000] text-white rounded hover:bg-[#992d22] transition duration-300 ease-in-out font-semibold", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` body { background-image: url('/tunis-pattern-bg.jpg'); background-size: cover; background-repeat: no-repeat; } `)); }