Change budget bar color
Change the color of the budget progress bar to yellow when the budget exceeds 90%.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user