315f2e3917
Refactors BudgetTabContent.tsx by extracting the category budget functionality into a separate component. This improves code modularity and maintainability.
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface BudgetProgressProps {
|
|
spentAmount: number;
|
|
targetAmount: number;
|
|
percentage: number;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
const BudgetProgress: React.FC<BudgetProgressProps> = ({
|
|
spentAmount,
|
|
targetAmount,
|
|
percentage,
|
|
formatCurrency
|
|
}) => {
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(spentAmount)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</p>
|
|
</div>
|
|
|
|
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
|
|
<div
|
|
style={{ width: `${percentage}%` }}
|
|
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${percentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-end">
|
|
<span className="text-xs font-medium text-gray-500">
|
|
{percentage}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetProgress;
|