function MainComponent({ children }) { const [screen, setScreen] = useState("home"); const [time, setTime] = useState(new Date()); const [waterIntake, setWaterIntake] = useState(0); const [postureAlerts, setPostureAlerts] = useState(true); useEffect(()=>{ const timer = setInterval(()=>{ setTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); const screens = { home: /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("menu"), className: "w-full h-full flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-white font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400 mt-2", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Tap for menu")), menu: /*#__PURE__*/ React.createElement("div", { className: "w-full h-full p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("activities"), className: "bg-[#1a1a1a] rounded-lg p-3 flex flex-col items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-running text-blue-400", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Activities")), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("workouts"), className: "bg-[#1a1a1a] rounded-lg p-3 flex flex-col items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dumbbell text-green-400", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Workouts")), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("posture"), className: "bg-[#1a1a1a] rounded-lg p-3 flex flex-col items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-yellow-400", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Posture")), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("water"), className: "bg-[#1a1a1a] rounded-lg p-3 flex flex-col items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tint text-blue-400", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Water"))), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("home"), className: "mt-4 text-center text-xs text-gray-400", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Tap to return")), activities: /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("menu"), className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-running text-4xl text-blue-400", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "10,000 steps")), workouts: /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("menu"), className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dumbbell text-4xl text-green-400", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-2", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "45 min today")), posture: /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("menu"), className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-4xl text-yellow-400", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, postureAlerts ? "Alerts On" : "Alerts Off")), water: /*#__PURE__*/ React.createElement("div", { onClick: ()=>setScreen("menu"), className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tint text-4xl text-blue-400", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-2", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, waterIntake, "/8 glasses")) }; return /*#__PURE__*/ React.createElement("div", { className: "inline-block relative", __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[320px] h-[320px] bg-[#1A1A1A] rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(0,0,0,0.4)]", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-[#000000] rounded-full flex items-center justify-center border-[6px] border-[#1A1A1A] shadow-[inset_0_0_20px_rgba(0,0,0,0.6)]", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[270px] h-[270px] bg-[#000000] rounded-full overflow-hidden flex items-center justify-center", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, screens[screen]))), /*#__PURE__*/ React.createElement("div", { className: "absolute right-[-12px] top-[120px] flex flex-col gap-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[24px] h-[50px] bg-[#1A1A1A] rounded-r-[12px] shadow-[2px_2px_5px_rgba(0,0,0,0.3)]", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-[24px] h-[50px] bg-[#1A1A1A] rounded-r-[12px] shadow-[2px_2px_5px_rgba(0,0,0,0.3)]", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex items-center justify-center bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this })); }