function MainComponent() { const handleRegister = (event)=>{ event.preventDefault(); // Handle registration logic here }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen flex items-center justify-center bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegister, className: "w-full max-w-[400px] p-8 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "profilePic", className: "w-[100px] h-[100px] bg-gray-200 rounded-full flex items-center justify-center cursor-pointer", __source: { fileName: "", lineNumber: 11, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 12, columnNumber: 25 }, __self: this }, "📷"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "profilePic", name: "profilePic", accept: "image/*", className: "hidden", __source: { fileName: "", lineNumber: 13, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-[#555] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 21 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", required: true, className: "w-full p-3 border rounded-lg focus:outline-none focus:border-[#3498db] font-roboto", placeholder: "Enter your email", __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-[#555] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 21 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", required: true, className: "w-full p-3 border rounded-lg focus:outline-none focus:border-[#3498db] font-roboto", placeholder: "Choose a username", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-[#555] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", required: true, className: "w-full p-3 border rounded-lg focus:outline-none focus:border-[#3498db] font-roboto", placeholder: "Create a password", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498db] text-white p-3 rounded-lg font-roboto font-bold hover:bg-[#2980b9] transition-colors duration-200", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Register"))); }