92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import PersianNumber from "../plugins/PersianNumber";
|
|
import Link from "next/link";
|
|
|
|
const UnderDevelopeTimer = () => {
|
|
const targetTimestamp = 1698635992 * 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 ">
|
|
<div className="mx-2 mt-4">
|
|
<div className="w-[50px] h-[50px] rounded-full bg-sky-800">
|
|
<p className="mb-0 text-2xl text-white font-bold pt-2">
|
|
<PersianNumber number={timeRemaining.days} />
|
|
</p>
|
|
</div>
|
|
<p className="mb-0">روز</p>
|
|
</div>
|
|
|
|
<div className="mx-2 mt-4">
|
|
<div className="w-[50px] h-[50px] rounded-full bg-sky-800">
|
|
<p className="mb-0 text-2xl text-white font-bold pt-2">
|
|
<PersianNumber number={timeRemaining.hours} />
|
|
</p>
|
|
</div>
|
|
<p className="mb-0">ساعت</p>
|
|
</div>
|
|
|
|
<div className="mx-2 mt-4">
|
|
<div className="w-[50px] h-[50px] rounded-full bg-sky-800">
|
|
<p className="mb-0 text-2xl text-white font-bold pt-2">
|
|
<PersianNumber number={timeRemaining.minutes} />
|
|
</p>
|
|
</div>
|
|
<p className="mb-0">دقیقه</p>
|
|
</div>
|
|
|
|
<div className="mx-2 mt-4">
|
|
<Link href="/login">
|
|
<div className="w-[50px] h-[50px] rounded-full bg-sky-800">
|
|
<p className="mb-0 text-2xl text-white font-bold pt-2">
|
|
<PersianNumber number={timeRemaining.seconds} />
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
<p className="mb-0">ثانیه</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UnderDevelopeTimer;
|