function MainComponent() { const [view, setView] = React.useState('mainMenu'); const [bookContent, setBookContent] = React.useState(''); const [textStyle, setTextStyle] = React.useState({ bold: false, underline: false, color: '#000000', fontFamily: 'font-roboto' }); const [user, setUser] = React.useState(null); const [email, setEmail] = React.useState(''); const [newEmail, setNewEmail] = React.useState(''); const [phone, setPhone] = React.useState(''); const [verificationCode, setVerificationCode] = React.useState(''); const [verificationInput, setVerificationInput] = React.useState(''); const toggleBold = ()=>{ setTextStyle({ ...textStyle, bold: !textStyle.bold }); }; const toggleUnderline = ()=>{ setTextStyle({ ...textStyle, underline: !textStyle.underline }); }; const handleChangeColor = (event)=>{ setTextStyle({ ...textStyle, color: event.target.value }); }; const handleChangeFont = (event)=>{ setTextStyle({ ...textStyle, fontFamily: event.target.value }); }; const handleMakeBook = ()=>{ setView('editor'); }; const handleContentChange = (event)=>{ setBookContent(event.target.value); }; const handleLoginSignUpChange = ()=>{ setNewEmail(''); setView('mainMenu'); }; const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleNewEmailChange = (event)=>{ setNewEmail(event.target.value); }; const handlePhoneChange = (event)=>{ setPhone(event.target.value); }; const handleVerificationInputChange = (event)=>{ setVerificationInput(event.target.value); }; const handleVerify = ()=>{ if (verificationInput === verificationCode) { setUser({ email: newEmail || email, phone }); handleLoginSignUpChange(); } else { alert('Incorrect verification code.'); } setVerificationInput(''); }; const handleSignOut = ()=>{ setUser(null); handleLoginSignUpChange(); }; const handleAccountSettings = ()=>{ setView('accountSettings'); }; const handleEmailSignUp = ()=>{ sendVerificationCode(email); }; const handleEmailPhoneSignUp = ()=>{ sendVerificationCode(email, true); }; const downloadBook = ()=>{ const element = document.createElement("a"); const file = new Blob([ bookContent ], { type: "application/msword" }); element.href = URL.createObjectURL(file); element.download = "MyBook.doc"; document.body.appendChild(element); element.click(); }; const sendVerificationCode = (toEmail, isSignUpWithPhone = false)=>{ if (toEmail) { const code = (Math.floor(Math.random() * 90000) + 10000).toString(); setVerificationCode(code); // Here should be the code to send the email in a real application alert(`Verification code sent to ${toEmail}: ${code}`); if (isSignUpWithPhone) { setEmail(newEmail); } else { setNewEmail(email); } setView('verify'); } }; const editorTextStyle = { fontWeight: textStyle.bold ? 'bold' : 'normal', textDecoration: textStyle.underline ? 'underline' : 'none', color: textStyle.color, fontFamily: textStyle.fontFamily }; let content; if (view === 'mainMenu') { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleMakeBook, className: "px-4 py-2 bg-blue-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Make a Book"), /*#__PURE__*/ React.createElement("button", { onClick: handleAccountSettings, className: "px-4 py-2 bg-gray-300 text-black font-semibold font-roboto rounded-md", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Account Settings")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Email", className: "px-4 py-2 border-2 border-gray-300 rounded-md w-80", value: email, onChange: handleEmailChange, name: "email", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Phone (optional for sign up)", className: "px-4 py-2 border-2 border-gray-300 rounded-md w-80", value: phone, onChange: handlePhoneChange, name: "phone", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleEmailSignUp, className: "px-4 py-2 bg-green-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Log In / Sign Up with Email"), /*#__PURE__*/ React.createElement("button", { onClick: handleEmailPhoneSignUp, className: "px-4 py-2 bg-green-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Sign Up with Email and Phone"))); } else if (view === 'editor') { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "border-2 border-gray-300 rounded-md w-80 h-96 p-4", style: editorTextStyle, onChange: handleContentChange, value: bookContent, placeholder: "Write your book content here...", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleBold, className: `px-2 py-1 border-2 ${textStyle.bold ? 'border-black' : 'border-gray-400'} rounded`, __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("button", { onClick: toggleUnderline, className: `px-2 py-1 border-2 ${textStyle.underline ? 'border-black' : 'border-gray-400'} rounded`, __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, "U"), /*#__PURE__*/ React.createElement("input", { type: "color", onChange: handleChangeColor, className: "w-10", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { onChange: handleChangeFont, className: "border-2 border-gray-300 rounded-md p-2", defaultValue: "font-roboto", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "font-roboto", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, "Roboto"), /*#__PURE__*/ React.createElement("option", { value: "font-crimson-text", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "Crimson Text")), /*#__PURE__*/ React.createElement("button", { onClick: downloadBook, className: "px-4 py-2 bg-blue-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, "Download Book")); } else if (view === 'accountSettings') { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "New Email", className: "px-4 py-2 border-2 border-gray-300 rounded-md w-80", value: newEmail, onChange: handleNewEmailChange, name: "newEmail", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleEmailSignUp, className: "px-4 py-2 bg-green-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Change Email"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignOut, className: "px-4 py-2 bg-red-500 text-white font-bold font-roboto rounded-md", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "Sign Out"))); } else if (view === 'verify') { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 210, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, "Enter the verification code sent to your email."), /*#__PURE__*/ React.createElement("input", { name: "verificationCode", type: "text", placeholder: "Verification Code", className: "px-4 py-2 border-2 border-gray-300 rounded-md w-72", value: verificationInput, onChange: handleVerificationInputChange, __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleVerify, className: "px-6 py-2 bg-green-500 text-white font-semibold font-roboto rounded-md", __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, "Verify")); } return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 232, columnNumber: 5 }, __self: this }, content); }