55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
interface PenaltyCountdownProps {
|
|
until: string | Date;
|
|
}
|
|
|
|
function getTimeLeft(until: string | Date) {
|
|
const untilDate = new Date(until).getTime();
|
|
const now = Date.now();
|
|
const diff = Math.max(0, untilDate - now);
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
return { days, hours, minutes, seconds };
|
|
}
|
|
|
|
export const PenaltyCountdown: React.FC<PenaltyCountdownProps> = ({ until }) => {
|
|
const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(until));
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!mounted) return;
|
|
const interval = setInterval(() => {
|
|
setTimeLeft(getTimeLeft(until));
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [until, mounted]);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<span className="countdown text-3xl">
|
|
{timeLeft.days > 0 && timeLeft.days + "d"}
|
|
<span style={{ "--value": timeLeft.hours } as React.CSSProperties} aria-live="polite">
|
|
{timeLeft.hours}
|
|
</span>
|
|
h
|
|
<span style={{ "--value": timeLeft.minutes } as React.CSSProperties} aria-live="polite">
|
|
{timeLeft.minutes}
|
|
</span>
|
|
m
|
|
<span style={{ "--value": timeLeft.seconds } as React.CSSProperties} aria-live="polite">
|
|
{timeLeft.seconds}
|
|
</span>
|
|
s
|
|
</span>
|
|
);
|
|
};
|