"use client";
import React, { useState, useEffect } from "react";
const CountdownTimer = ({ style = 1, targetDate = "2025-06-31T23:59:59" }) => {
const [showTimer, setShowTimer] = useState(false);
useEffect(() => {
setShowTimer(true);
}, []);
const calculateTimeLeft = () => {
const difference = +new Date(targetDate) - +new Date();
if (difference > 0) {
return {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
return null; // Time is up
};
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearInterval(timer); // Cleanup the timer on component unmount
}, [targetDate]);
if (!timeLeft) {
return Time's up!
;
}
return (
<>
{showTimer ? (
<>
{style == 1 && (
{timeLeft.days}
D :
{timeLeft.hours}
H :
{timeLeft.minutes}
M :
{timeLeft.seconds}
S
)}
{style == 2 && (
{timeLeft.days}
Days
{timeLeft.hours}
Hours
{timeLeft.minutes}
Mins
{timeLeft.seconds}
Secs
)}
{style == 3 && (
{timeLeft.days}
DAYS
{timeLeft.hours}
HOURS
{timeLeft.minutes}
MINUTES
{timeLeft.seconds}
SECONDS
)}
{style == 4 && (
{timeLeft.minutes}
:
{timeLeft.seconds}
)}
{style == 5 && (
{timeLeft.days}
d :
{timeLeft.hours}
h :
{timeLeft.minutes}
m :
{timeLeft.seconds}
s
)}
) : (
""
)}
{style == 6 && (
{timeLeft.days}
D
{timeLeft.hours}
H
{timeLeft.minutes}
M
{timeLeft.seconds}
S
)}
);
};
export default CountdownTimer;