ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change budget bar color

Browse Source 
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
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/BudgetCard.tsx
View File

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