Ban Message Design

apps/hub/app/(app)/_components/PenaltyCountdown.tsx

@@ -0,0 +1,46 @@
+"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>
+	);
+};