File size: 3,374 Bytes
88c4c60 | 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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | "use client";
import { cn } from "@/shared/utils/cn";
import { formatResetTime } from "./utils";
// Calculate color based on remaining percentage
const getColorClasses = (remainingPercentage) => {
if (remainingPercentage > 70) {
return {
text: "text-green-500",
bg: "bg-green-500",
bgLight: "bg-green-500/10",
emoji: "🟢"
};
}
if (remainingPercentage >= 30) {
return {
text: "text-yellow-500",
bg: "bg-yellow-500",
bgLight: "bg-yellow-500/10",
emoji: "🟡"
};
}
// 0-29% including 0% (out of quota) - show red
return {
text: "text-red-500",
bg: "bg-red-500",
bgLight: "bg-red-500/10",
emoji: "🔴"
};
};
// Format reset time display
const formatResetTimeDisplay = (resetTime) => {
if (!resetTime) return null;
try {
const resetDate = new Date(resetTime);
const now = new Date();
const isToday = resetDate.toDateString() === now.toDateString();
const isTomorrow = resetDate.toDateString() === new Date(now.getTime() + 86400000).toDateString();
const timeStr = resetDate.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
hour12: true,
});
if (isToday) return `Today, ${timeStr}`;
if (isTomorrow) return `Tomorrow, ${timeStr}`;
return resetDate.toLocaleString(undefined, {
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: true,
});
} catch {
return null;
}
};
export default function QuotaProgressBar({
percentage = 0,
label = "",
used = 0,
total = 0,
unlimited = false,
resetTime = null
}) {
const colors = getColorClasses(percentage);
const countdown = formatResetTime(resetTime);
const resetDisplay = formatResetTimeDisplay(resetTime);
// percentage is already remaining percentage (from ProviderLimitCard)
const remaining = percentage;
return (
<div className="space-y-2">
{/* Label and percentage */}
<div className="flex items-center justify-between text-sm">
<span className="font-semibold text-text-primary">
{label}
</span>
<div className="flex items-center gap-1.5">
<span className="text-xs">{colors.emoji}</span>
<span className={cn("font-medium", colors.text)}>
{remaining}%
</span>
</div>
</div>
{/* Progress bar */}
{!unlimited && (
<div className={cn("h-2 rounded-full overflow-hidden", colors.bgLight)}>
<div
className={cn("h-full transition-all duration-300", colors.bg)}
style={{ width: `${Math.min(remaining, 100)}%` }}
/>
</div>
)}
{/* Usage details and countdown */}
<div className="flex items-center justify-between text-xs text-text-muted">
<span>
{used.toLocaleString()} / {total.toLocaleString()} requests
</span>
{countdown !== "-" && (
<div className="flex items-center gap-1">
<span>•</span>
<span className="font-medium">Reset in {countdown}</span>
</div>
)}
</div>
{/* Reset time display */}
{resetDisplay && (
<div className="text-xs text-text-muted/70">
Reset at {resetDisplay}
</div>
)}
</div>
);
}
|