Spaces:
Sleeping
Sleeping
File size: 2,316 Bytes
e50b7ef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
'use client';
import { useState, useEffect } from 'react';
import { AlarmClock } from 'lucide-react';
interface TimeLeft {
days?: number;
hours?: number;
minutes?: number;
seconds?: number;
}
interface ExamCountdownProps {
targetDate: Date;
}
export function ExamCountdown({ targetDate }: ExamCountdownProps) {
const [timeLeft, setTimeLeft] = useState<TimeLeft | null>(null);
useEffect(() => {
const calculateTimeLeft = (): TimeLeft => {
const difference = +targetDate - +new Date();
let newTimeLeft: TimeLeft = {};
if (difference > 0) {
newTimeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
return newTimeLeft;
};
// Initial calculation right after mount, only on client
setTimeLeft(calculateTimeLeft());
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearInterval(timer);
}, [targetDate]);
if (timeLeft === null) {
return <p className="text-sm text-foreground/70 mt-1.5">Calculating time until exam...</p>;
}
const timerComponents: string[] = [];
if (typeof timeLeft.days === 'number') timerComponents.push(`${timeLeft.days}d`);
if (typeof timeLeft.hours === 'number') timerComponents.push(`${timeLeft.hours}h`);
if (typeof timeLeft.minutes === 'number') timerComponents.push(`${timeLeft.minutes}m`);
if (typeof timeLeft.seconds === 'number') timerComponents.push(`${timeLeft.seconds}s`);
if (timerComponents.length === 0 && +targetDate <= +new Date()) {
return <p className="text-sm text-primary font-medium mt-1.5">The exam period has begun. Good luck!</p>;
}
if (timerComponents.length === 0) {
return <p className="text-sm text-foreground/70 mt-1.5">Calculating time until exam...</p>;
}
return (
<div className="mt-2 flex items-center text-sm text-primary font-medium bg-primary/10 px-2.5 py-1.5 rounded-md shadow-sm">
<AlarmClock size={16} className="mr-2 shrink-0" />
<span>
Exam starts in: <strong>{timerComponents.join(' : ')}</strong>
</span>
</div>
);
}
|