"use client" import * as React from "react" import { cn } from "@/lib/utils" interface TimerCharProps { char: string } function TimerChar({ char }: TimerCharProps) { const ref = React.useRef(null) const [height, setHeight] = React.useState(0) React.useEffect(() => { if (ref.current) { setHeight(ref.current.offsetHeight) } }, []) if (char === ":") { return (

) } const number = parseInt(char, 10) const top = height > 0 ? number * height * -1 : 0 return (

{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((digit) => (

{digit}

))}

) } interface AnimatedTimerProps { className?: string showSeconds?: boolean use24Hour?: boolean } export function AnimatedTimer({ className, showSeconds = true, use24Hour = true, }: AnimatedTimerProps) { const [time, setTime] = React.useState(null) const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) setTime(new Date()) }, []) React.useEffect(() => { if (!mounted) return const interval = setInterval(() => { setTime(new Date()) }, 1000) return () => clearInterval(interval) }, [mounted]) const formatSegment = (segment: number): string => { return segment < 10 ? `0${segment}` : String(segment) } const getHours = (hours: number): number => { if (use24Hour) return hours return hours % 12 === 0 ? 12 : hours % 12 } const getTimeString = (): string => { if (!time) return showSeconds ? "00:00:00" : "00:00" const hours = formatSegment(getHours(time.getHours())) const minutes = formatSegment(time.getMinutes()) const seconds = formatSegment(time.getSeconds()) return showSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}` } const chars = getTimeString().split("") // Show skeleton during SSR if (!mounted) { return (

{chars.map((char, index) => (

{char}

))}

) } return (

{chars.map((char, index) => ( ))}

) }