37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
interface DraftTimerProps {
|
|
timeRemaining: number; // in seconds
|
|
isActive?: boolean;
|
|
}
|
|
|
|
export function DraftTimer({ timeRemaining, isActive = false }: DraftTimerProps) {
|
|
// Format time as M:SS or H:MM:SS
|
|
const formatTime = (seconds: number): string => {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
|
|
if (hours > 0) {
|
|
return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
|
|
}
|
|
return `${minutes}:${String(secs).padStart(2, "0")}`;
|
|
};
|
|
|
|
// Determine color based on time remaining
|
|
const getColorClass = (): string => {
|
|
if (timeRemaining > 60) {
|
|
return "text-green-600 dark:text-green-400";
|
|
} else if (timeRemaining > 30) {
|
|
return "text-yellow-600 dark:text-yellow-400";
|
|
} else if (timeRemaining > 10) {
|
|
return "text-red-600 dark:text-red-400";
|
|
} else {
|
|
return "text-red-600 dark:text-red-400 animate-pulse";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`text-sm font-mono font-semibold ${getColorClass()} ${isActive ? "font-bold" : ""}`}>
|
|
{formatTime(timeRemaining)}
|
|
</div>
|
|
);
|
|
}
|