67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from 'react';
|
|
import { EventCardProps } from '@/types/space';
|
|
|
|
export default function EventCard({ title, targetDate, icon }: EventCardProps) {
|
|
// 1. Setup the state to hold our strings
|
|
const [timeLeft, setTimeLeft] = useState({ h: "00", m: "00", s: "00" });
|
|
|
|
useEffect(() => {
|
|
const updateTimer = () => {
|
|
const now = new Date().getTime();
|
|
const distance = targetDate.getTime() - now;
|
|
|
|
// If the time has passed, keep it at zero
|
|
if (distance < 0) {
|
|
setTimeLeft({ h: "00", m: "00", s: "00" });
|
|
return;
|
|
}
|
|
|
|
// Math to convert milliseconds to Hours, Minutes, and Seconds
|
|
const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const s = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
// 2. Update the state (padStart ensures we always see '05' instead of '5')
|
|
setTimeLeft({
|
|
h: h.toString().padStart(2, '0'),
|
|
m: m.toString().padStart(2, '0'),
|
|
s: s.toString().padStart(2, '0')
|
|
});
|
|
};
|
|
|
|
// Run the timer every 1000ms (1 second)
|
|
const interval = setInterval(updateTimer, 1000);
|
|
|
|
// Call it once immediately so the user doesn't see 00:00:00 for the first second
|
|
updateTimer();
|
|
|
|
// Important: Clean up the timer if the component disappears
|
|
return () => clearInterval(interval);
|
|
}, [targetDate]);
|
|
|
|
return (
|
|
<div className="relative p-6 rounded-xl border border-slate-800 bg-slate-900/40 backdrop-blur-md overflow-hidden group">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="p-2 bg-blue-500/10 rounded-lg text-blue-400">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-slate-300 font-mono tracking-widest uppercase text-xs">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="text-4xl font-mono text-white flex gap-2">
|
|
<span>{timeLeft.h}</span>
|
|
<span className="text-slate-500">:</span>
|
|
<span>{timeLeft.m}</span>
|
|
<span className="text-slate-500">:</span>
|
|
<span>{timeLeft.s}</span>
|
|
</div>
|
|
|
|
<p className="text-[10px] text-slate-500 mt-2 font-mono uppercase tracking-widest leading-none">
|
|
T-Minus to Horizon
|
|
</p>
|
|
</div>
|
|
);
|
|
} |