47 lines
1.3 KiB
TypeScript
47 lines
1.3 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();
|
|
let diff = Math.max(0, untilDate - now);
|
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
|
diff -= hours * 1000 * 60 * 60;
|
|
const minutes = Math.floor(diff / (1000 * 60));
|
|
diff -= minutes * 1000 * 60;
|
|
const seconds = Math.floor(diff / 1000);
|
|
return { hours, minutes, seconds };
|
|
}
|
|
|
|
export const PenaltyCountdown: React.FC<PenaltyCountdownProps> = ({ until }) => {
|
|
const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(until));
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTimeLeft(getTimeLeft(until));
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [until]);
|
|
|
|
return (
|
|
<span className="countdown text-3xl">
|
|
<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>
|
|
);
|
|
};
|