function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [isOwner, setIsOwner] = React.useState(false); const [tabIndex, setTabIndex] = React.useState(0); const [isEditingAnnouncement, setIsEditingAnnouncement] = React.useState(false); const [showRegistration, setShowRegistration] = React.useState(false); const handleUsernameChange = (event)=>{ setUsername(event.target.value); }; const handlePasswordChange = (event)=>{ setPassword(event.target.value); }; const handleTabChange = (index)=>{ setTabIndex(index); }; const toggleIsOwner = ()=>{ setIsOwner(!isOwner); }; const toggleEditingAnnouncement = ()=>{ setIsEditingAnnouncement(!isEditingAnnouncement); }; const toggleRegistration = ()=>{ setShowRegistration(!showRegistration); }; const TABS = [ { name: 'Announcement', content: 'Announcement and updates for the server.' }, { name: 'Update', content: 'Stay updated with the latest server changes and features.' }, { name: 'Discord', content: 'Join our Discord to get in touch with the community.' }, { name: 'More', content: 'Explore more content and information about the roleplay realm.' } ]; const tabContent = TABS[tabIndex].content; const loginForm = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 my-2 border rounded", placeholder: "Name_Surname", name: "username", value: username, onChange: handleUsernameChange, pattern: "[a-zA-Z]+_[a-zA-Z]+", title: "Please enter in the format: Name_Surname", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 my-2 border rounded", type: "password", placeholder: "Password", name: "password", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-3 my-2 bg-[#007bff] text-white rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 my-2 bg-[#6c757d] text-white rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Forgot Password"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center my-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-r border-gray-300 mx-2 h-5", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "or"), /*#__PURE__*/ React.createElement("div", { className: "border-l border-gray-300 mx-2 h-5", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 my-2 bg-[#7289da] text-white rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, "Login with Discord"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 text-[#007bff] text-sm", onClick: toggleRegistration, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); const registrationForm = /*#__PURE__*/ React.createElement("div", { style: { animation: 'fadeIn 0.5s' }, __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 my-2 border rounded", placeholder: "Name_Surname", name: "register_username", value: username, onChange: handleUsernameChange, pattern: "[a-zA-Z]+_[a-zA-Z]+", title: "Please enter in the format: Name_Surname", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 my-2 border rounded", type: "password", placeholder: "Password", name: "register_password", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-3 my-2 bg-[#28a745] text-white rounded", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 text-[#007bff] text-sm", onClick: toggleRegistration, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, "Already have an account? Login")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#f4f4f4] font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center py-6 bg-[#333333] text-white", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "Endless Roleplay")), /*#__PURE__*/ React.createElement("main", { className: "mx-auto p-8 w-full max-w-lg", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, !isOwner && (showRegistration ? registrationForm : loginForm), isOwner && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffc107] text-white rounded px-4 py-2", onClick: toggleEditingAnnouncement, __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, isEditingAnnouncement ? "Finish Editing" : "Edit Announcement")), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, isEditingAnnouncement && /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-4 border rounded", placeholder: "Post an announcement or update...", name: "announcement", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, tabContent))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between my-10", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, TABS.map((tab, index)=>/*#__PURE__*/ React.createElement("button", { key: tab.name, className: `py-2 px-4 rounded ${tabIndex === index ? 'bg-[#007bff] text-white' : 'bg-white text-black'}`, onClick: ()=>handleTabChange(index), __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, tab.name))), !isOwner && /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, tabContent))), /*#__PURE__*/ React.createElement("footer", { className: "mt-auto py-4 bg-[#333333] text-white text-center", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white rounded px-4 py-2", onClick: toggleIsOwner, __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, isOwner ? "Owner Mode: ON" : "Owner Mode: OFF"))); }