function MainComponent() { const [page, setPage] = React.useState("registration"); const [lockStatus, setLockStatus] = React.useState("Inactive"); const [phoneIdle, setPhoneIdle] = React.useState("1d 3h 23m"); const handleStartLock = ()=>{ setLockStatus("Active"); setPhoneIdle("Tracking..."); }; const handleEndLock = ()=>{ setLockStatus("Inactive"); setPhoneIdle("1d 3h 23m"); }; const renderPage = ()=>{ switch(page){ case "registration": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-4 font-crimson-text text-2xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "LockGains"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 p-3 border rounded-lg", type: "email", name: "email", placeholder: "Email", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 p-3 border rounded-lg", type: "password", name: "password", placeholder: "Password", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 p-3 border rounded-lg", type: "tel", name: "phone", placeholder: "Phone number", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "terms", className: "mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, "By signing up, you agree to the terms o...")), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setPage("timeTracking"), className: "w-full p-3 text-white bg-[#007bff] rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Get Started"))); case "timeTracking": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-4 font-crimson-text text-xl font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Phone Lock"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Lock Status: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 55 }, __self: this }, lockStatus)), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Phone Idle: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 46, columnNumber: 54 }, __self: this }, phoneIdle))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-evenly", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStartLock, className: "p-3 bg-gray-200 text-black rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Start Lock"), /*#__PURE__*/ React.createElement("button", { onClick: handleEndLock, className: "p-3 text-white bg-[#007bff] rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "End Lock"))); case "rewardManagement": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-4 font-crimson-text text-xl font-bold", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "My Wallet"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Available balance: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 61 }, __self: this }, "0.0003 BTC")), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Total earned: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 56 }, __self: this }, "0.0022 BTC"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Transaction history:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "You earned 0.0001 BTC - Jan 12"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "You earned 0.0001 BTC - Jan 11"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "You earned 0.0001 BTC - Jan 10"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "You earned 0.0001 BTC - Jan 09"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "You earned 0.0001 BTC - Jan 08"))), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-gray-200 text-black rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Transfer to another wallet")); case "statisticsDisplay": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-4 font-crimson-text text-xl font-bold", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Total Earnings: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 80, columnNumber: 58 }, __self: this }, "$43.20")), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Last 30 Days ", /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 81, columnNumber: 51 }, __self: this }, "+12%"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Phone usage (hours):"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Today: 2h 40m - 4:15 PM"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "This week: 19h 20m - 2d")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Lock period:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Today: 3h 40m - 4:15 PM"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "This week: 20h 20m - 2d"))); case "ranking": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-4 font-crimson-text text-xl font-bold", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Leaderboard"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between text-xs", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 border rounded-full", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "All Time"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 border rounded-full", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "This Year"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 border rounded-full", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "This Month"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 border rounded-full", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "This Week")), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full mb-4 p-3 border rounded-lg", placeholder: "Search for friends", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "1. Mandy - 3,000 hrs in 2022 - $300"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "2. Alex - 2,800 hrs in 2022 - $280"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "3. Emma - 2,500 hrs in 2022 - $250"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "4. Jack - 2,200 hrs in 2022 - $220"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "5. Alice - 2,000 hrs in 2022 - $200"))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, renderPage()), page !== "registration" && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 w-full max-w-[400px] p-4 bg-white flex justify-between", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", onClick: ()=>setPage("timeTracking"), __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home text-2xl", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", onClick: ()=>setPage("timeTracking"), __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-money-bill-wave text-xl", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Earn")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", onClick: ()=>setPage("rewardManagement"), __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-wallet text-xl", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Wallet")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", onClick: ()=>setPage("ranking"), __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trophy text-xl", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Ranking")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", onClick: ()=>setPage("statisticsDisplay"), __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user text-xl", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Profile")))); }