function MainComponent() { const [timeLeft, setTimeLeft] = React.useState(1500); const [isRunning, setIsRunning] = React.useState(false); const [taskList, setTaskList] = React.useState([]); const [taskInput, setTaskInput] = React.useState(""); React.useEffect(()=>{ let timerId; if (isRunning && timeLeft > 0) { timerId = setInterval(()=>{ setTimeLeft((prevTimeLeft)=>prevTimeLeft - 1); }, 1000); } else if (timeLeft === 0) { setIsRunning(false); alert("Time is up!"); } return ()=>clearInterval(timerId); }, [ isRunning, timeLeft ]); const startTimer = ()=>setIsRunning(true); const pauseTimer = ()=>setIsRunning(false); const resetTimer = ()=>{ setIsRunning(false); setTimeLeft(1500); }; const addTask = ()=>{ if (taskInput.trim() !== "") { setTaskList([ ...taskList, { id: Date.now(), name: taskInput, completed: false } ]); setTaskInput(""); } }; const completeTask = (taskId)=>{ setTaskList(taskList.map((task)=>task.id === taskId ? { ...task, completed: !task.completed } : task)); }; const formatTime = ()=>{ const minutes = String(Math.floor(timeLeft / 60)).padStart(2, '0'); const seconds = String(timeLeft % 60).padStart(2, '0'); return `${minutes}:${seconds}`; }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "25 Minutes Timer"), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-white shadow-md rounded-full flex items-center justify-center text-5xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, formatTime()), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startTimer, className: "bg-green-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { onClick: pauseTimer, className: "bg-orange-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Pause"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, className: "bg-red-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Reset")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "task", value: taskInput, onChange: (e)=>setTaskInput(e.target.value), placeholder: "New task", className: "mb-4 p-2 border rounded w-[300px] font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTask, className: "bg-blue-500 text-white py-2 px-4 rounded mb-8 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Add Task"), /*#__PURE__*/ React.createElement("ul", { className: "w-[300px] bg-white shadow-md rounded p-4 mb-8 font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, taskList.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `task_${task.id}`, checked: task.completed, onChange: ()=>completeTask(task.id), __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "w-full flex justify-around bg-white shadow-md p-4 fixed bottom-0", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("a", { href: "/statistics", className: "text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Statistics")))); }