117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Clock, AlertCircle } from "lucide-react";
|
|
|
|
interface ContractCountdownProps {
|
|
endDate?: string | null;
|
|
className?: string;
|
|
}
|
|
|
|
export function ContractCountdown({
|
|
endDate,
|
|
className = "",
|
|
}: ContractCountdownProps) {
|
|
const [daysLeft, setDaysLeft] = useState<number | null>(null);
|
|
const [isExpired, setIsExpired] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!endDate) {
|
|
setDaysLeft(null);
|
|
return;
|
|
}
|
|
|
|
const calculateDaysLeft = () => {
|
|
const end = new Date(endDate);
|
|
const today = new Date();
|
|
|
|
// Reset time for comparison
|
|
end.setHours(0, 0, 0, 0);
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
const timeDiff = end.getTime() - today.getTime();
|
|
const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
|
|
|
setIsExpired(days < 0);
|
|
setDaysLeft(days);
|
|
};
|
|
|
|
calculateDaysLeft();
|
|
|
|
// Update every minute to keep countdown fresh
|
|
const interval = setInterval(calculateDaysLeft, 60000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [endDate]);
|
|
|
|
if (daysLeft === null) {
|
|
return null;
|
|
}
|
|
|
|
// Determine colors based on urgency
|
|
const getUrgencyStyle = () => {
|
|
if (isExpired) {
|
|
return {
|
|
bg: "bg-red-500/15",
|
|
border: "border-red-500/40",
|
|
text: "text-red-700 dark:text-red-300",
|
|
icon: "text-red-500",
|
|
label: "Expired",
|
|
};
|
|
}
|
|
|
|
if (daysLeft < 7) {
|
|
return {
|
|
bg: "bg-red-500/15",
|
|
border: "border-red-500/40",
|
|
text: "text-red-700 dark:text-red-300",
|
|
icon: "text-red-500",
|
|
label: `${daysLeft} day${daysLeft !== 1 ? "s" : ""} left`,
|
|
};
|
|
}
|
|
|
|
if (daysLeft < 14) {
|
|
return {
|
|
bg: "bg-orange-500/15",
|
|
border: "border-orange-500/40",
|
|
text: "text-orange-700 dark:text-orange-300",
|
|
icon: "text-orange-500",
|
|
label: `${daysLeft} days left`,
|
|
};
|
|
}
|
|
|
|
if (daysLeft < 30) {
|
|
return {
|
|
bg: "bg-amber-500/15",
|
|
border: "border-amber-500/40",
|
|
text: "text-amber-700 dark:text-amber-300",
|
|
icon: "text-amber-500",
|
|
label: `${daysLeft} days left`,
|
|
};
|
|
}
|
|
|
|
return {
|
|
bg: "bg-green-500/15",
|
|
border: "border-green-500/40",
|
|
text: "text-green-700 dark:text-green-300",
|
|
icon: "text-green-500",
|
|
label: `${daysLeft} days left`,
|
|
};
|
|
};
|
|
|
|
const urgency = getUrgencyStyle();
|
|
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center gap-2 rounded-full border ${urgency.bg} ${urgency.border} px-3 py-1.5 text-[11px] font-bold uppercase tracking-wider ${urgency.text} ${className}`}
|
|
>
|
|
{isExpired ? (
|
|
<AlertCircle className={`h-3.5 w-3.5 ${urgency.icon}`} />
|
|
) : (
|
|
<Clock className={`h-3.5 w-3.5 ${urgency.icon} animate-pulse`} />
|
|
)}
|
|
{urgency.label}
|
|
</div>
|
|
);
|
|
}
|