[V0_FILE]typescriptreact:file="components/visual-timer.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Play, Pause, RotateCcw } from "lucide-react" const VisualTimer = () => { const [duration, setDuration] = useState(60) const [timeLeft, setTimeLeft] = useState(duration) const [isRunning, setIsRunning] = useState(false) const timerRef = useRef(null) useEffect(() => { if (isRunning && timeLeft > 0) { timerRef.current = setTimeout(() => { setTimeLeft((prevTime) => prevTime - 1) }, 1000) } else if (timeLeft === 0) { setIsRunning(false) } return () => { if (timerRef.current) clearTimeout(timerRef.current) } }, [isRunning, timeLeft]) const startTimer = () => setIsRunning(true) const pauseTimer = () => setIsRunning(false) const resetTimer = () => { setIsRunning(false) setTimeLeft(duration) } const handleDurationChange = (e: React.ChangeEvent) => { const newDuration = Number.parseInt(e.target.value, 10) setDuration(newDuration) setTimeLeft(newDuration) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const progress = (timeLeft / duration) * 100 return (

{formatTime(timeLeft)}

) } export default VisualTimer [V0_FILE]typescriptreact:file="components/braun-timer.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Play, Pause, RotateCcw } from "lucide-react" const BraunTimer = () => { const [duration, setDuration] = useState(600) // 10 minutes default const [timeLeft, setTimeLeft] = useState(duration) const [isRunning, setIsRunning] = useState(false) const timerRef = useRef(null) useEffect(() => { if (isRunning && timeLeft > 0) { timerRef.current = setTimeout(() => { setTimeLeft((prevTime) => prevTime - 1) }, 1000) } else if (timeLeft === 0) { setIsRunning(false) } return () => { if (timerRef.current) clearTimeout(timerRef.current) } }, [isRunning, timeLeft]) const startTimer = () => setIsRunning(true) const pauseTimer = () => setIsRunning(false) const resetTimer = () => { setIsRunning(false) setTimeLeft(duration) } const setPresetDuration = (minutes: number) => { const newDuration = minutes * 60 setDuration(newDuration) setTimeLeft(newDuration) setIsRunning(false) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const progress = (timeLeft / duration) * 100 return (

{/* Timer face */} {/* Time display */}

{formatTime(timeLeft)}

{/* Bezel markers */} {[0, 1, 2, 3].map((i) => (

))}

{/* Control buttons */}

{/* Preset buttons */}

{[10, 15, 20, 30].map((minutes) => ( ))}

) } export default BraunTimer [V0_FILE]typescriptreact:file="components/minimal-timer.tsx" "use client" import { useState, useEffect, useRef } from "react" import { Play, Pause, RotateCcw } from "lucide-react" const MinimalTimer = () => { const [duration, setDuration] = useState(600) // 10 minutes default const [timeLeft, setTimeLeft] = useState(duration) const [isRunning, setIsRunning] = useState(false) const timerRef = useRef(null) useEffect(() => { if (isRunning && timeLeft > 0) { timerRef.current = setTimeout(() => { setTimeLeft((prevTime) => prevTime - 1) }, 1000) } else if (timeLeft === 0) { setIsRunning(false) } return () => { if (timerRef.current) clearTimeout(timerRef.current) } }, [isRunning, timeLeft]) const startTimer = () => setIsRunning(true) const pauseTimer = () => setIsRunning(false) const resetTimer = () => { setIsRunning(false) setTimeLeft(duration) } const setPresetDuration = (minutes: number) => { const newDuration = minutes * 60 setDuration(newDuration) setTimeLeft(newDuration) setIsRunning(false) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const progress = (timeLeft / duration) * 100 return (

{/* Timer display */}

{formatTime(timeLeft)}

{/* Preset options */}

{[10, 15, 20, 30].map((minutes) => ( ))}

{/* Control buttons */}

) } export default MinimalTimer [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import MinimalTimer from "@/components/minimal-timer" export default function Home() { return }

About

Tags

Share

About

Tags

Share

More Templates Like This