function ToggleStartPauseButton({ isActive, onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "px-4 py-2 bg-[#007BFF] text-white font-roboto rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isActive ? 'Pause' : 'Start'); } function ToggleStartPauseButtonStory() { const [isActive, setIsActive] = React.useState(false); const handleClick = ()=>setIsActive(!isActive); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ToggleStartPauseButton, { isActive: isActive, onClick: handleClick, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentTime, setCurrentTime] = React.useState(new Date().toLocaleTimeString()); const [countdownTime, setCountdownTime] = React.useState("10:00"); const [isActive, setIsActive] = React.useState(false); React.useEffect(()=>{ const interval = setInterval(()=>setCurrentTime(new Date().toLocaleTimeString()), 1000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ let interval = null; if (isActive) { interval = setInterval(()=>{ const [minutes, seconds] = countdownTime.split(":").map(Number); if (seconds === 0 && minutes === 0) { setIsActive(false); clearInterval(interval); } else if (seconds === 0) { setCountdownTime(`${minutes - 1}:59`); } else { setCountdownTime(`${minutes}:${seconds - 1 < 10 ? `0${seconds - 1}` : seconds - 1}`); } }, 1000); } return ()=>clearInterval(interval); }, [ countdownTime, isActive ]); const addTime = ()=>{ const [minutes, seconds] = countdownTime.split(":").map(Number); setCountdownTime(`${minutes + 5}:${seconds}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen w-screen", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 w-full bg-[#FF0000] flex justify-center items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { name: "current-time", className: "font-roboto text-[490px] text-white leading-none", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, currentTime)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 w-full bg-[#0000FF] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { name: "countdown-timer", className: "font-roboto text-[550px] text-white leading-none", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, countdownTime), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ToggleStartPauseButton, { isActive: isActive, onClick: ()=>setIsActive(!isActive), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTime, className: "text-[60px] px-8 py-5 bg-[#00FF00] text-white font-roboto rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Add 5 Minutes")))); }