[V0_FILE]typescript:file="utils/formatTimeDifference.ts" isMerged="true" import { differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears, addYears, addMonths } from 'date-fns'; export function formatTimeDifference(endDate: Date, type: 'till' | 'from', now: Date) { const [start, end] = type === 'till' ? [now, endDate] : [endDate, now]; const totalSeconds = Math.max(0, differenceInSeconds(end, start)); const years = differenceInYears(end, start); const months = differenceInMonths(end, addYears(start, years)); const days = differenceInDays(end, addMonths(addYears(start, years), months)); const hours = differenceInHours(end, addMonths(addYears(start, years), months)) % 24; const minutes = differenceInMinutes(end, addMonths(addYears(start, years), months)) % 60; const seconds = totalSeconds % 60; return { total: totalSeconds * 1000, years, months, days, hours, minutes, seconds }; } [V0_FILE]typescriptreact:file="components/Dashboard.tsx" isEdit="true" isMerged="true" import React, { useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Timer } from './Timer'; import { TimerCreationCard } from './TimerCreationCard'; import { TimerData } from '../types/TimerData'; import { TimeProvider } from '../contexts/TimeContext'; export function Dashboard() { const [timers, setTimers] = React.useState([]); useEffect(() => { const storedTimers = localStorage.getItem('timers'); if (storedTimers) { setTimers(JSON.parse(storedTimers, (key, value) => key === 'endDate' ? new Date(value) : value )); } else { // Default timers const defaultTimers: TimerData[] = [ { id: '1', name: "2025", endDate: new Date(2025, 0, 1), // January 1st, 2025 type: 'till' }, { id: '2', name: "Since ChatGPT", endDate: new Date(2022, 10, 30), // November 30, 2022 type: 'from' } ]; setTimers(defaultTimers); localStorage.setItem('timers', JSON.stringify(defaultTimers)); } // Enable View Transitions API document.documentElement.classList.add('view-transition'); }, []); useEffect(() => { localStorage.setItem('timers', JSON.stringify(timers)); }, [timers]); const handleCreateTimer = (newTimer: Omit) => { const timerWithId: TimerData = { ...newTimer, id: Date.now().toString() }; setTimers(prevTimers => { const updatedTimers = [...prevTimers, timerWithId]; localStorage.setItem('timers', JSON.stringify(updatedTimers)); return updatedTimers; }); }; const handleDeleteTimer = (id: string) => { setTimers(prevTimers => { const updatedTimers = prevTimers.filter(timer => timer.id !== id); localStorage.setItem('timers', JSON.stringify(updatedTimers)); return updatedTimers; }); }; return (

{timers.map((timer) => ( ))}

); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" 'use client' import { Dashboard } from '../components/Dashboard' export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Timer Dashboard', description: 'A dashboard for managing multiple timers', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 93%; /* #eeeeee */ --foreground: 0 0% 26%; /* #424242 */ --card: 0 0% 96%; /* #f6f6f6 */ --card-foreground: 0 0% 26%; /* #424242 */ --muted: 0 0% 96%; /* #f6f6f6 */ --muted-foreground: 0 0% 26%; /* #424242 */ --border: 0 0% 92%; /* #ebebeb */ --input: 0 0% 92%; /* #ebebeb */ --radius: 1.5rem; } .dark { --background: 0 0% 11%; /* #1d1d1d */ --foreground: 0 0% 71%; /* #b5b5b5 */ --card: 0 0% 13%; /* #212121 */ --card-foreground: 0 0% 71%; /* #b5b5b5 */ --muted: 0 0% 13%; /* #212121 */ --muted-foreground: 0 0% 71%; /* #b5b5b5 */ --border: 0 0% 15%; /* #252525 */ --input: 0 0% 15%; /* #252525 */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground font-mono; } } /* View Transitions API styles */ .view-transition * { view-transition-name: none; view-transition-group: none; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.5s; } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes slide-from-right { from { transform: translateX(30px); } } @keyframes slide-to-left { to { transform: translateX(-30px); } } ::view-transition-old(root) { animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; } ::view-transition-new(root) { animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } [V0_FILE]typescriptreact:file="components/TimerCreationCard.tsx" isQuickEdit="true" isMerged="true" import React, { useState, useRef, useEffect } from 'react'; import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Input } from "@/components/ui/input" import { TimerData } from '../types/TimerData'; import { Plus } from 'lucide-react'; interface TimerCreationCardProps { onCreateTimer: (timer: Omit) => void; } export function TimerCreationCard({ onCreateTimer }: TimerCreationCardProps) { const [isActive, setIsActive] = useState(false); const [selectedDate, setSelectedDate] = useState(undefined); const [timerName, setTimerName] = useState(''); const [step, setStep] = useState<'initial' | 'date' | 'name'>('initial'); const inputRef = useRef(null); useEffect(() => { if (step === 'name' && inputRef.current) { inputRef.current.focus(); } }, [step]); const handleClick = () => { if (step === 'initial') { setStep('date'); setIsActive(true); } }; const handleCancel = () => { setStep('initial'); setIsActive(false); setSelectedDate(undefined); setTimerName(''); }; const handleConfirm = () => { if (step === 'date' && selectedDate) { setStep('name'); } else if (step === 'name' && timerName && selectedDate) { const now = new Date(); const timerType = selectedDate > now ? 'till' : 'from'; onCreateTimer({ name: timerName, endDate: selectedDate, type: timerType }); handleCancel(); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && timerName && selectedDate) { handleConfirm(); } }; return ( {step === 'initial' && ( )} {step === 'date' && ( <> setSelectedDate(date)} className="rounded-md scale-[0.85] -mt-4 border-none" />

)} {step === 'name' && ( <> {selectedDate && (

{selectedDate.toLocaleString(undefined, { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

)} setTimerName(e.target.value)} onKeyDown={handleKeyDown} className="mb-4 w-full font-mono" />

)} ); } [V0_FILE]typescript:file="types/TimerData.ts" isMerged="true" export interface TimerData { id: string; name: string; endDate: Date; type: 'till' | 'from'; } [V0_FILE]typescriptreact:file="contexts/TimeContext.tsx" isMerged="true" import React, { createContext, useContext, useEffect, useState } from 'react'; interface TimeContextType { now: Date; } const TimeContext = createContext(undefined); export function TimeProvider({ children }: { children: React.ReactNode }) { const [now, setNow] = useState(new Date()); useEffect(() => { const interval = setInterval(() => { setNow(new Date()); }, 1000); return () => clearInterval(interval); }, []); return ( {children} ); } export function useTime() { const context = useContext(TimeContext); if (context === undefined) { throw new Error('useTime must be used within a TimeProvider'); } return context; } [V0_FILE]json:file="package.json" isMerged="true" { "name": "timer-dashboard", "version": "1.0.0", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "date-fns": "^2.30.0", "framer-motion": "^10.12.16" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } } [V0_FILE]typescriptreact:file="components/Timer.tsx" isEdit="true" isQuickEdit="true" import React from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { formatTimeDifference } from '../utils/formatTimeDifference'; import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { X } from 'lucide-react' import { TimerData } from '../types/TimerData'; import { useTime } from '../contexts/TimeContext'; interface TimerProps extends Omit { id: string; onDelete: (id: string) => void; } export function Timer({ id, name, endDate, type, onDelete }: TimerProps) { const { now } = useTime(); const [showDelete, setShowDelete] = React.useState(false); const [isHovered, setIsHovered] = React.useState(false); const timeLeft = React.useMemo(() => formatTimeDifference(endDate, type, now), [endDate, type, now]); const isExpired = type === 'till' && timeLeft.total <= 0; const renderTimeUnit = (value: number, label: string) => { return (

{value.toString().padStart(2, '0')} {label}

); }; const renderTimeUnits = () => { const units = [ { value: timeLeft.years, label: 'YEARS' }, { value: timeLeft.months, label: 'MONTHS' }, { value: timeLeft.days, label: 'DAYS' }, { value: timeLeft.hours, label: 'HOURS' }, { value: timeLeft.minutes, label: 'MINUTES' }, { value: timeLeft.seconds, label: 'SECONDS' }, ]; if (isExpired) { return units.slice(2, 6).map((unit) => ( {renderTimeUnit(0, unit.label)} )); } let startIndex = 0; if (timeLeft.years > 0) { startIndex = 0; } else if (timeLeft.months > 0) { startIndex = 1; } else { startIndex = 2; } const unitsToShow = units.slice(startIndex, startIndex + 4); return unitsToShow.map((unit) => ( {renderTimeUnit(unit.value, unit.label)} )); }; return ( { setShowDelete(true); setIsHovered(true); }} onMouseLeave={() => { setShowDelete(false); setIsHovered(false); }} style={{ viewTransitionName: `timer-${id}` }} >

{name}

{type === 'till' ? 'Until: ' : 'Since: '} {endDate.toLocaleString(undefined, { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

{renderTimeUnits()}

{showDelete && ( )} ); }

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This