function MainComponent() { const [time, setTime] = React.useState(0); const [intervalId, setIntervalId] = React.useState(null); const [paused, setPaused] = React.useState(false); const [isRunning, setIsRunning] = React.useState(false); const startTimer = ()=>{ if (!isRunning) { setIsRunning(true); const id = setInterval(()=>{ setTime((prev)=>{ if (prev > 0) return prev - 1; clearInterval(id); setIsRunning(false); return 0; }); }, 1000); setIntervalId(id); } }; const pauseTimer = ()=>{ if (paused) { startTimer(); setPaused(false); } else { clearInterval(intervalId); setPaused(true); } }; const stopTimer = ()=>{ clearInterval(intervalId); setIsRunning(false); setTime(0); }; const setPresetTime = (seconds)=>{ if (!isRunning) setTime(seconds); }; const displayTime = `${String(Math.floor(time / 60)).padStart(2, '0')}:${String(time % 60).padStart(2, '0')}`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, displayTime), /*#__PURE__*/ React.createElement("div", { className: "relative bg-white w-[200px] h-[400px] rounded-full shadow-lg mt-8 mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gray-300 rounded-full", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPresetTime(300), className: "bg-blue-500 text-white font-semibold py-2 px-4 rounded-l-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "5:00"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPresetTime(600), className: "bg-blue-500 text-white font-semibold py-2 px-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "10:00"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPresetTime(900), className: "bg-blue-500 text-white font-semibold py-2 px-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "15:00"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPresetTime(1200), className: "bg-blue-500 text-white font-semibold py-2 px-4 rounded-r-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "20:00")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, !isRunning ? /*#__PURE__*/ React.createElement("button", { onClick: startTimer, className: "bg-green-500 text-white font-semibold py-2 px-6 rounded-l-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Start") : /*#__PURE__*/ React.createElement("button", { onClick: stopTimer, className: "bg-red-500 text-white font-semibold py-2 px-6 rounded-l-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Stop"), /*#__PURE__*/ React.createElement("button", { onClick: pauseTimer, className: "bg-yellow-500 text-white font-semibold py-2 px-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, paused ? 'Resume' : 'Pause')), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes sandFlow { 0% { top: 0; } 100% { top: 100%; } } .sand-flow { position: absolute; width: 100%; height: 50%; background: #f4a261; animation: sandFlow 60s linear infinite; } `)); }