Pomodoro Timer app using react and million.js

packages/kitchen-sink/src/examples/pomodoro_timer.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { block } from 'million/react';
+
+const PomodoroTimer = block(() => {
+    const [minutes, setMinutes] = React.useState(25);
+    const [seconds, setSeconds] = React.useState(0);
+    const [isRunning, setIsRunning] = React.useState(false);
+
+    React.useEffect(() => {
+        let interval = null;
+        if (isRunning) {
+            interval = setInterval(() => {
+                if (seconds > 0) {
+                    setSeconds(seconds - 1);
+                }
+                if (seconds === 0) {
+                    if (minutes === 0) {
+                        clearInterval(interval);
+                    } else {
+                        setMinutes(minutes - 1);
+                        setSeconds(59);
+                    }
+                }
+            }, 1000);
+        } else if (!isRunning && seconds !== 0) {
+            clearInterval(interval);
+        }
+        return () => clearInterval(interval);
+    });
+
+    const startTimer = () => {
+        setIsRunning(true);
+    };
+
+    const stopTimer = () => {
+        setIsRunning(false);
+    };
+
+    const resetTimer = () => {
+        setMinutes(25);
+        setSeconds(0);
+        setIsRunning(false);
+    };
+
+    return (
+        <div>
+            <h1>Pomodoro Timer</h1>
+            <div>
+                {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+            </div>
+            <button onClick={startTimer}>Start</button>
+            <button onClick={stopTimer}>Stop</button>
+            <button onClick={resetTimer}>Reset</button>
+        </div>
+    );
+});
+
+export default PomodoroTimer;