'use client' import { motion, AnimatePresence } from "motion/react"; import { useCallback, useEffect, useRef, useState, memo } from "react"; interface TimeLeft { days: number; hours: number; minutes: number; seconds: number; } interface CountdownResult extends TimeLeft { isLagging: boolean; } const LAUNCH_DATE = "July 21, 2026 00:00:00 UTC"; function useCountdown(target: string): CountdownResult { const targetRef = useRef(new Date(target)); const lastTickRef = useRef(Date.now()); const calculate = useCallback((): CountdownResult => { const now = Date.now(); const diff = +targetRef.current - now; const delta = now - lastTickRef.current; lastTickRef.current = now; const isLagging = delta > 1500; if (diff <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0, isLagging: false, }; } return { days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff / (1000 * 60 * 60)) % 24), minutes: Math.floor((diff / 1000 / 60) % 60), seconds: Math.floor((diff / 1000) % 60), isLagging, }; }, []); const [state, setState] = useState(() => calculate()); useEffect(() => { const id = setInterval(() => { setState(calculate()); }, 1000); return () => clearInterval(id); }, [calculate]); return state; } const FlipNumber = memo(function FlipNumber({ value, size = 80, label, animate = true, }: { value: number; size?: number; label: string; animate?: boolean; }) { const prevRef = useRef(value); const fontSize = size * 0.6; const prev = animate ? prevRef.current : value; const formattedValue = value.toString().padStart(2, "0"); const formattedPrev = prev.toString().padStart(2, "0"); useEffect(() => { prevRef.current = value; }, [value]); return (

{animate && (

{formattedPrev}

{formattedValue}

)}

{formattedValue}

{animate ? formattedPrev : formattedValue}

{label}

); }); export default function CountdownFlip() { const { days, hours, minutes, seconds, isLagging } = useCountdown(LAUNCH_DATE); const [size, setSize] = useState(80); useEffect(() => { const mediaQuery = window.matchMedia("(max-width: 640px)"); const handleChange = (e: MediaQueryListEvent | MediaQueryList) => { setSize(e.matches ? 50 : 80); }; handleChange(mediaQuery); mediaQuery.addEventListener("change", handleChange); return () => mediaQuery.removeEventListener("change", handleChange); }, []); return (

OFFER ENDS IN

); }

Countdown

Countdown Flip