function MainComponent() { const [timer, setTimer] = React.useState(20 * 60); const [counter, setCounter] = React.useState(0); const [intervalId, setIntervalId] = React.useState(null); React.useEffect(()=>{ if (timer === 0) clearInterval(intervalId); }, [ timer, intervalId ]); const handleTimer = ()=>{ if (timer > 0 && !intervalId) { const id = setInterval(()=>{ setTimer((prev)=>prev - 1); }, 1000); setIntervalId(id); } else { clearInterval(intervalId); setIntervalId(null); setTimer(20 * 60); } }; const formatTime = ()=>{ const minutes = Math.floor(timer / 60); const seconds = timer % 60; return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#064e3b] h-screen w-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/3 h-[80vh] bg-[#D3D3D3] flex flex-col items-center py-8 justify-around", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Counter & Timer"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] text-3xl", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, formatTime()), /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-white bg-blue-500 px-6 py-3 rounded", onClick: handleTimer, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, timer > 0 && intervalId ? 'Reset' : 'Start'), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] text-3xl", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, counter), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-white bg-green-500 px-6 py-3 rounded", onClick: ()=>setCounter(counter + 1), __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-white bg-red-500 px-6 py-3 rounded", onClick: ()=>setCounter(counter - 1), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "-")))); }