function MainComponent() { const [currentPage, setCurrentPage] = React.useState("signIn"); const [loading, setLoading] = React.useState(false); const [walletConnected, setWalletConnected] = React.useState(false); const [profileUpdated, setProfileUpdated] = React.useState(false); const [viewCount, setViewCount] = React.useState(0); const signInWithWallet = ()=>{ setLoading(true); setTimeout(()=>{ setLoading(false); setWalletConnected(true); setCurrentPage("customizeProfile"); }, 2000); }; const signInWithEmailOrSocial = ()=>{ setLoading(true); setTimeout(()=>{ setLoading(false); setCurrentPage("customizeProfile"); }, 1000); }; const updateProfile = ()=>{ setProfileUpdated(true); setCurrentPage("myPage"); }; const sharePage = ()=>{ setViewCount((prevCount)=>prevCount + 1); }; let content; switch(currentPage){ case "signIn": content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 space-y-4 bg-[#6A0DAD] text-white", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "walletSignIn", className: "w-full p-2 bg-[#4d0099] rounded font-roboto", onClick: signInWithWallet, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Sign in with Torus Wallet"), /*#__PURE__*/ React.createElement("button", { name: "emailSignIn", className: "w-full p-2 bg-[#4d0099] rounded font-roboto", onClick: signInWithEmailOrSocial, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Sign in with Email"), /*#__PURE__*/ React.createElement("button", { name: "socialSignIn", className: "w-full p-2 bg-[#4d0099] rounded font-roboto", onClick: signInWithEmailOrSocial, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Sign in with Social")); break; case "customizeProfile": content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 space-y-4 bg-[#6A0DAD] text-white", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "selfIntroduction", placeholder: "Your self-introduction", className: "w-full p-2 border border-gray-300 rounded font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", name: "snsLink", placeholder: "SNS Link", className: "w-full p-2 border border-gray-300 rounded font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", name: "artImage", placeholder: "Art Image URL", className: "w-full p-2 border border-gray-300 rounded font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", name: "mapUrl", placeholder: "Map URL", className: "w-full p-2 border border-gray-300 rounded font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-[#4d0099] rounded font-roboto", onClick: updateProfile, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Update Profile")); break; case "myPage": content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 space-y-4 bg-[#6A0DAD] text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Your Profile is live!"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#4d0099] rounded font-roboto", onClick: sharePage, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Share on SNS"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "View Count: ", viewCount)); break; default: content = null; } if (loading) { content = /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center p-4 text-white bg-[#6A0DAD] font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Loading..."); } return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 bg-[#6A0DAD]", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, content, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .container { animation: fadeIn 0.5s ease-in-out; } `)); }