96 lines
2.6 KiB
JavaScript
96 lines
2.6 KiB
JavaScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
|
|
const TimerDown = () => {
|
|
const targetTimestamp = 1704170967 * 1000; // Convert to milliseconds
|
|
|
|
const [timeRemaining, setTimeRemaining] = useState({
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0,
|
|
milliseconds: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const now = new Date();
|
|
const timeDifference = targetTimestamp - now.getTime();
|
|
|
|
if (timeDifference > 0) {
|
|
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor(
|
|
(timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
|
);
|
|
const minutes = Math.floor(
|
|
(timeDifference % (1000 * 60 * 60)) / (1000 * 60)
|
|
);
|
|
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
|
|
const milliseconds = timeDifference % 1000;
|
|
|
|
setTimeRemaining({
|
|
days,
|
|
hours,
|
|
minutes,
|
|
seconds,
|
|
milliseconds,
|
|
});
|
|
} else {
|
|
clearInterval(interval);
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex justify-center ltr border-[2px] border-white realtive mr-5 px-2 rounded-full ">
|
|
<div className="">
|
|
<p className="mb-0 = text-center text-white font-bold pt-1">
|
|
<PersianNumber
|
|
number={timeRemaining.days}
|
|
style={"text-[27px] text-white"}
|
|
/>
|
|
<small className="text-[10px] px-2">:</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="">
|
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
|
<PersianNumber
|
|
number={timeRemaining.hours}
|
|
style={"text-[27px] text-white"}
|
|
/>
|
|
<small className="text-[10px] px-2">:</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div className=" ">
|
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
|
<PersianNumber
|
|
number={timeRemaining.minutes}
|
|
style={"text-[27px] text-white"}
|
|
/>
|
|
<small className="text-[10px] px-2">:</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="">
|
|
<Link href="/login">
|
|
{" "}
|
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
|
<PersianNumber
|
|
number={timeRemaining.seconds}
|
|
style={"text-[27px] text-white"}
|
|
/>
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimerDown;
|