51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type RemainingTime = {
|
|
hours: number;
|
|
minutes: number;
|
|
seconds: number;
|
|
};
|
|
|
|
function getRemainingTime(): RemainingTime {
|
|
const now = new Date();
|
|
const endOfDay = new Date(now);
|
|
endOfDay.setHours(23, 59, 59, 999);
|
|
const totalSeconds = Math.max(0, Math.floor((endOfDay.getTime() - now.getTime()) / 1000));
|
|
|
|
return {
|
|
hours: Math.floor(totalSeconds / 3600),
|
|
minutes: Math.floor((totalSeconds % 3600) / 60),
|
|
seconds: totalSeconds % 60,
|
|
};
|
|
}
|
|
|
|
function TimeBox({ value, label }: { value: number; label: string }) {
|
|
return (
|
|
<div className="flex min-w-0 flex-1 flex-col items-center rounded-xl bg-white/15 px-1 py-2.5 md:py-3">
|
|
<strong className="text-lg leading-none tabular-nums md:text-2xl" suppressHydrationWarning>
|
|
{String(value).padStart(2, "0")}
|
|
</strong>
|
|
<span className="mt-2 text-[10px] text-white/80 md:text-xs">{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SpecialSaleCountdown() {
|
|
const [remaining, setRemaining] = useState(getRemainingTime);
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => setRemaining(getRemainingTime()), 1000);
|
|
return () => window.clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="grid w-full grid-cols-3 gap-1.5 md:gap-2" dir="ltr">
|
|
<TimeBox value={remaining.hours} label="ساعت" />
|
|
<TimeBox value={remaining.minutes} label="دقیقه" />
|
|
<TimeBox value={remaining.seconds} label="ثانیه" />
|
|
</div>
|
|
);
|
|
}
|