import React, { useState, useEffect } from 'react'; import { Play, Pause, SkipForward, Plus, Check } from "@phosphor-icons/react"; import { Progress } from "@/components/ui/progress"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; const WORK_TIME = 25 * 60; // 25 minutes in seconds const BREAK_TIME = 5 * 60; // 5 minutes in seconds const PomodoroTimer = () => { const [time, setTime] = useState(WORK_TIME); const [isActive, setIsActive] = useState(false); const [isWork, setIsWork] = useState(true); const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(''); const [completedPomodoros, setCompletedPomodoros] = useState(0); useEffect(() => { let interval = null; if (isActive && time > 0) { interval = setInterval(() => { setTime((time) => time - 1); }, 1000); } else if (time === 0) { if (isWork) { setCompletedPomodoros(prev => prev + 1); } setIsWork(!isWork); setTime(isWork ? BREAK_TIME : WORK_TIME); setIsActive(false); } else { clearInterval(interval); } return () => clearInterval(interval); }, [isActive, time, isWork]); const toggleTimer = () => { setIsActive(!isActive); }; const resetTimer = () => { setIsActive(false); setTime(isWork ? WORK_TIME : BREAK_TIME); }; const addTask = (e) => { e.preventDefault(); if (newTask.trim() !== '') { setTasks([...tasks, { text: newTask, completed: false }]); setNewTask(''); } }; const toggleTask = (index) => { const newTasks = [...tasks]; newTasks[index].completed = !newTasks[index].completed; setTasks(newTasks); }; const formatTime = (time) => { const minutes = Math.floor(time / 60); const seconds = time % 60; return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; }; const TomatoSVG = ({ progress }) => ( ); return (

Pomodoro Timer

{formatTime(time)}

{isWork ? 'Work Time' : 'Break Time'}

Completed Pomodoros

{[...Array(completedPomodoros)].map((_, i) => ( ))}

Tasks

{task.text}

); }; export default PomodoroTimer;

🍅 Pomodoro Timer