Change budget bar color

Change the color of the budget progress bar to yellow when the budget exceeds 90%.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:13:23 +00:00
parent 3b212026b4
commit 7ac197ba97

View File

@@ -29,6 +29,9 @@ const BudgetCard: React.FC<BudgetCardProps> = ({
maximumFractionDigits: 0
}).format(total);
// Determine progress bar color based on percentage
const progressBarColor = percentage >= 90 ? 'bg-yellow-400' : `bg-${color}`;
return (
<div className="neuro-card">
<h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
@@ -40,7 +43,7 @@ const BudgetCard: React.FC<BudgetCardProps> = ({
<div className="relative h-3 neuro-pressed overflow-hidden">
<div
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-${color}`}
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
style={{ width: `${percentage}%` }}
/>
</div>