104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
"use client";
|
|
import Link from "next/link";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const TimerDown = () => {
|
|
const [timeRemaining, setTimeRemaining] = useState({
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0,
|
|
milliseconds: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const calculateTimeRemaining = () => {
|
|
// Get current date and time
|
|
const now = new Date();
|
|
|
|
// Calculate yesterday's date
|
|
const yesterday = new Date(now);
|
|
yesterday.setDate(now.getDate() - 1);
|
|
yesterday.setHours(23, 59, 0, 0); // Set time to 23:59:00
|
|
|
|
// Calculate tomorrow's date
|
|
const tomorrow = new Date(now);
|
|
tomorrow.setDate(now.getDate() + 1);
|
|
tomorrow.setHours(23, 59, 0, 0); // Set time to 23:59:00
|
|
|
|
// Calculate time difference
|
|
const difference = tomorrow - now;
|
|
|
|
// Convert time difference to days, hours, minutes, seconds, and milliseconds
|
|
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor(
|
|
(difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
|
);
|
|
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
|
|
const milliseconds = difference % 1000;
|
|
|
|
// Update state
|
|
setTimeRemaining({ days, hours, minutes, seconds, milliseconds });
|
|
};
|
|
|
|
// Call calculateTimeRemaining once to set initial state
|
|
calculateTimeRemaining();
|
|
|
|
// Update time remaining every second
|
|
const intervalId = setInterval(calculateTimeRemaining, 1000);
|
|
|
|
// Clean up interval on component unmount
|
|
return () => clearInterval(intervalId);
|
|
}, []);
|
|
|
|
return (
|
|
<div className=" justify-center ltr realtive mr-5 px-2 mt-[-30px] xs:hidden lg:flex ">
|
|
<div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
|
|
<p className="mb-0 = text-center text-red-900 font-bold pt-3 ">
|
|
<PersianNumber
|
|
number={timeRemaining.days}
|
|
style={"text-[27px] text-red-900 "}
|
|
/>
|
|
</p>
|
|
|
|
<p className="text-[10px] pt-4 text-center text-gray-600 ">روز</p>
|
|
</div>
|
|
|
|
<div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
|
|
<p className="mb-0 text-center text-red-900 font-bold pt-3 ">
|
|
<PersianNumber
|
|
number={timeRemaining.hours}
|
|
style={"text-[27px] text-red-900 "}
|
|
/>
|
|
</p>
|
|
<p className="text-[10px] pt-4 text-center text-gray-600 ">ساعت</p>
|
|
</div>
|
|
<div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
|
|
<p className="mb-0 text-center text-red-900 font-bold pt-3 ">
|
|
<PersianNumber
|
|
number={timeRemaining.minutes}
|
|
style={"text-[27px] text-red-900 "}
|
|
/>
|
|
</p>
|
|
<p className="text-[10px] pt-4 text-center text-gray-600 ">دقیقه</p>
|
|
</div>
|
|
<div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
|
|
<Link href="/login">
|
|
{" "}
|
|
<p className="mb-0 text-center text-red-900 font-bold pt-3 ">
|
|
<PersianNumber
|
|
number={timeRemaining.seconds}
|
|
style={"text-[27px] text-red-900 "}
|
|
/>
|
|
</p>
|
|
<p className="text-[10px] pt-4 text-center text-gray-600 ">ثانیه</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimerDown;
|