function MainComponent() { const [time, setTime] = React.useState(1500); const [isRunning, setIsRunning] = React.useState(false); const [pomodorosCompleted, setPomodorosCompleted] = React.useState(0); const [mode, setMode] = React.useState('work'); const [workTime, setWorkTime] = React.useState(1500); const [breakTime, setBreakTime] = React.useState(300); const [timeUnit, setTimeUnit] = React.useState('seconds'); const formatTime = (timeInSeconds)=>{ const hours = Math.floor(timeInSeconds / 3600); const minutes = Math.floor(timeInSeconds % 3600 / 60); const seconds = timeInSeconds % 60; return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; }; const startTimer = ()=>{ if (time > 0) { setIsRunning(true); } }; const pauseTimer = ()=>{ setIsRunning(false); }; const resetTimer = ()=>{ setIsRunning(false); if (mode === 'work') { setTime(workTime || 1); } else { setTime(breakTime || 1); } }; const resetToWorkStage = ()=>{ setIsRunning(false); setMode('work'); setTime(workTime || 1); }; const handleWorkTimeChange = (e)=>{ const newTime = parseInt(e.target.value); if (!isNaN(newTime) && newTime >= 0) { const timeInSeconds = timeUnit === 'seconds' ? newTime : newTime * 60; setWorkTime(timeInSeconds); if (mode === 'work') { setTime(timeInSeconds || 1); } } }; const handleBreakTimeChange = (e)=>{ const newTime = parseInt(e.target.value); if (!isNaN(newTime) && newTime >= 0) { const timeInSeconds = timeUnit === 'seconds' ? newTime : newTime * 60; setBreakTime(timeInSeconds); if (mode === 'break') { setTime(timeInSeconds || 1); } } }; const handleTimeUnitChange = (e)=>{ const newUnit = e.target.value; setTimeUnit(newUnit); setWorkTime((prevTime)=>newUnit === 'seconds' ? prevTime : Math.floor(prevTime / 60)); setBreakTime((prevTime)=>newUnit === 'seconds' ? prevTime : Math.floor(prevTime / 60)); setTime((prevTime)=>newUnit === 'seconds' ? prevTime : Math.floor(prevTime / 60)); }; React.useEffect(()=>{ let interval = null; if (isRunning && time > 0) { interval = setInterval(()=>{ setTime((prevTime)=>prevTime > 0 ? prevTime - 1 : 0); }, 1000); } else if (time === 0) { if (mode === 'work') { setPomodorosCompleted((prevPomodoros)=>prevPomodoros + 1); setMode('break'); setTime(breakTime || 1); } else { setMode('work'); setTime(workTime || 1); } } return ()=>clearInterval(interval); }, [ isRunning, time, mode, workTime, breakTime ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#1A202C] to-[#2D3748] text-white font-roboto px-4 py-8", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-[#63B3ED] to-[#90CDF4] text-center", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "Pomodoro Timer"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D3748] p-6 rounded-3xl shadow-2xl w-full max-w-[400px] border border-[#4A5568]", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-lg font-bold px-4 py-1 rounded-full transition-colors duration-300 ${mode === 'work' ? 'bg-[#63B3ED] text-[#1A202C]' : 'bg-[#718096] text-white'}`, __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Work"), /*#__PURE__*/ React.createElement("div", { className: `text-lg font-bold px-4 py-1 rounded-full transition-colors duration-300 ${mode === 'break' ? 'bg-[#90CDF4] text-[#1A202C]' : 'bg-[#718096] text-white'}`, __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Break")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D3748] rounded-full w-[200px] h-[200px] mx-auto flex items-center justify-center mb-8", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-center text-white", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, formatTime(time))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startTimer, className: "bg-[#48BB78] hover:bg-[#38A169] text-white text-base font-bold py-2 rounded-full transition-colors duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }), "Start"), /*#__PURE__*/ React.createElement("button", { onClick: pauseTimer, className: "bg-[#F6AD55] hover:bg-[#ED8936] text-white text-base font-bold py-2 rounded-full transition-colors duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause mr-2", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), "Pause"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, onDoubleClick: resetToWorkStage, className: "bg-[#E53E3E] hover:bg-[#C53030] text-white text-base font-bold py-2 rounded-full transition-colors duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }), "Reset")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-end gap-4", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-base font-bold mb-1 text-[#63B3ED]", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Work"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: timeUnit === 'seconds' ? workTime : Math.floor(workTime / 60), onChange: handleWorkTimeChange, className: "bg-[#4A5568] text-white text-base font-bold py-1 px-3 rounded-lg w-20 mr-1", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: timeUnit, onChange: handleTimeUnitChange, className: "bg-[#4A5568] text-white text-sm py-1 px-2 rounded-lg", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "seconds", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "Seconds"), /*#__PURE__*/ React.createElement("option", { value: "minutes", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, "Minutes")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-base font-bold mb-1 text-[#90CDF4]", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "Break"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: timeUnit === 'seconds' ? breakTime : Math.floor(breakTime / 60), onChange: handleBreakTimeChange, className: "bg-[#4A5568] text-white text-base font-bold py-1 px-3 rounded-lg w-20 mr-1", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: timeUnit, onChange: handleTimeUnitChange, className: "bg-[#4A5568] text-white text-sm py-1 px-2 rounded-lg", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "seconds", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, "Seconds"), /*#__PURE__*/ React.createElement("option", { value: "minutes", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Minutes")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-1", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, "Pomodoros Completed"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#63B3ED] to-[#90CDF4]", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, pomodorosCompleted))); }