import React, { useState, useEffect, useRef, useCallback } from "react"; import { Play, Pause, RotateCcw } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "카운트다운", start: "시작", pause: "멈추기", reset: "초기화", done: "시간 종료! 🔔", presets: "빠른 설정", custom: "직접 입력", h: "시", m: "분", s: "초" }, en: { title: "Countdown", start: "Start", pause: "Pause", reset: "Reset", done: "Time's up! 🔔", presets: "Quick Set", custom: "Custom", h: "h", m: "m", s: "s" }, ja: { title: "カウントダウン", start: "開始", pause: "一時停止", reset: "リセット", done: "時間です! 🔔", presets: "プリセット", custom: "カスタム", h: "時", m: "分", s: "秒" }, zh: { title: "倒计时", start: "开始", pause: "暂停", reset: "重置", done: "时间到! 🔔", presets: "快捷设置", custom: "自定义", h: "时", m: "分", s: "秒" }, }; var t = T[LANG] || T.en; var PRESETS = [ { label: "1" + t.m, sec: 60 }, { label: "3" + t.m, sec: 180 }, { label: "5" + t.m, sec: 300 }, { label: "10" + t.m, sec: 600 }, { label: "15" + t.m, sec: 900 }, { label: "30" + t.m, sec: 1800 }, ]; export default function App() { var [totalSec, setTotalSec] = useSharedStorage("countdown_total_sec", 300); var [timeLeft, setTimeLeft] = useState(totalSec); var [running, setRunning] = useState(false); var [finished, setFinished] = useState(false); var [customMin, setCustomMin] = useState(String(Math.floor(totalSec / 60))); var ref = useRef(null); useEffect(function() { if (!running && !finished) { setTimeLeft(totalSec); setCustomMin(String(Math.floor(totalSec / 60))); } }, [totalSec]); var progress = totalSec > 0 ? timeLeft / totalSec : 0; var mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); var ss = String(timeLeft % 60).padStart(2, "0"); var R = 100; var C = 2 * Math.PI * R; useEffect(function() { if (!running) return; ref.current = setInterval(function() { setTimeLeft(function(prev) { if (prev <= 1) { setRunning(false); setFinished(true); return 0; } return prev - 1; }); }, 1000); return function() { clearInterval(ref.current); }; }, [running]); var toggle = useCallback(function() { if (finished) return; setRunning(function(r) { return !r; }); }, [finished]); var reset = useCallback(function() { setRunning(false); setFinished(false); setTimeLeft(totalSec); clearInterval(ref.current); }, [totalSec]); var selectPreset = useCallback(function(sec) { setTotalSec(sec); setTimeLeft(sec); setRunning(false); setFinished(false); setCustomMin(String(Math.floor(sec / 60))); }, []); var applyCustom = useCallback(function() { var sec = Math.max(1, parseInt(customMin) || 0) * 60; setTotalSec(sec); setTimeLeft(sec); setRunning(false); setFinished(false); }, [customMin]); var urgentColor = timeLeft <= 10 && running ? "from-red-500 to-rose-600" : timeLeft <= 30 && running ? "from-amber-500 to-orange-600" : "from-indigo-500 to-blue-700"; return (

{finished ? (

🔔

{t.done}

) : (

{mm}:{ss}

)}

{!running && (

{t.presets}

{PRESETS.map(function(p) { return ( ); })}

{t.m}

)}

); }

Countdown Timer

Countdown Timer

reviews