"use client"; import { useState, useEffect } from "react"; export function Countdown({ date, time, className, onCompleteAction, }: { date: string; time: string; className?: string; onCompleteAction?: () => void; }) { const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }); useEffect(() => { const [day, month, year] = date.split("-"); const [hours, minutes, seconds] = time.split(":"); const targetDate = new Date( parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hours), parseInt(minutes), parseInt(seconds), ); const calculateTimeLeft = () => { const now = new Date(); const difference = targetDate.getTime() - now.getTime(); if (difference <= 0) { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); onCompleteAction?.(); return; } const totalSeconds = Math.floor(difference / 1000); const days = Math.floor(totalSeconds / (60 * 60 * 24)); const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)); const minutes = Math.floor((totalSeconds % (60 * 60)) / 60); const seconds = totalSeconds % 60; setTimeLeft({ days, hours, minutes, seconds }); }; const interval = setInterval(calculateTimeLeft, 1000); return () => clearInterval(interval); }, [date, time, onCompleteAction]); return (

{timeLeft.days > 0 && ( <> {timeLeft.days} days )} {timeLeft.hours.toString().padStart(2, "0")}: {timeLeft.minutes.toString().padStart(2, "0")}: {timeLeft.seconds.toString().padStart(2, "0")}

); }

Countdown

Countdown Example

Props

Countdown