mukeshs/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mukesh13
2025-07-30 13:44:47 +05:30
commit 6c0c0e3d1d
494 changed files with 57695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
components/common/Countdown.jsx Normal file
View File

@ -0,0 +1,206 @@
"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 <div>Time's up!</div>;
}
return (
<>
{showTimer ? (
<>
{style == 1 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">D :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">H :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">M :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">S</span>
</span>
</div>
)}
{style == 2 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">Days</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">Hours</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">Mins</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">Secs</span>
</span>
</div>
)}
{style == 3 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">DAYS</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">HOURS</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">MINUTES</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">SECONDS</span>
</span>
</div>
)}
{style == 4 && (
<div aria-hidden="true" class="countdown__timer">
<span class="countdown__item">
<span class="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span class="countdown__label">:</span>
</span>
<span class="countdown__item">
<span class="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span class="countdown__label"></span>
</span>
</div>
)}
{style == 5 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">d :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">h :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">m :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">s</span>
</span>
</div>
)}
</>
) : (
""
)}
{style == 6 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">D</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">H</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">M</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">S</span>
</span>
</div>
)}
</>
);
};
export default CountdownTimer;