function MainComponent() { const [timeLeft, setTimeLeft] = React.useState(1500); // 25:00 in seconds const [isActive, setIsActive] = React.useState(false); const [isPaused, setIsPaused] = React.useState(true); React.useEffect(()=>{ let interval = null; if (isActive && !isPaused) { interval = setInterval(()=>{ setTimeLeft((timeLeft)=>timeLeft - 1); }, 1000); } else { clearInterval(interval); } return ()=>clearInterval(interval); }, [ isActive, isPaused ]); const toggle = ()=>{ setIsActive(!isActive); setIsPaused(!isPaused); }; const reset = ()=>{ setTimeLeft(1500); setIsActive(false); setIsPaused(true); }; const formatTimeLeft = (time)=>{ const minutes = Math.floor(time / 60); const seconds = time % 60; return `${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8e2cf]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#e53e3e] mb-10", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "ポモドーロタイマーアプリ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 flex flex-col items-center w-[90%] max-w-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333333] text-2xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, formatTimeLeft(timeLeft)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { "aria-label": isActive ? "Pause timer" : "Start timer", className: "bg-[#68d391] text-white font-roboto py-2 px-4 rounded-md shadow-md hover:bg-[#48bb78]", onClick: toggle, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, isActive ? 'Pause ⏸️' : 'Start 🍅'), /*#__PURE__*/ React.createElement("button", { "aria-label": "Stop timer", className: "bg-[#fc8181] text-white font-roboto py-2 px-4 rounded-md shadow-md hover:bg-[#f56565]", onClick: ()=>{ setIsActive(false); setIsPaused(true); }, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Stop ⏹️"), /*#__PURE__*/ React.createElement("button", { "aria-label": "Reset timer", className: "bg-[#63b3ed] text-white font-roboto py-2 px-4 rounded-md shadow-md hover:bg-[#4299e1]", onClick: reset, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Reset 🔁")))); }