81a950a96c
Reverted the number of expense categories back to the original three. Future feature additions or changes will require confirmation.
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { categoryIcons } from '@/constants/categoryIcons';
|
|
|
|
interface BudgetCardProps {
|
|
title: string;
|
|
current: number;
|
|
total: number;
|
|
color?: string;
|
|
}
|
|
|
|
const BudgetCard: React.FC<BudgetCardProps> = ({
|
|
title,
|
|
current,
|
|
total,
|
|
color = 'neuro-income'
|
|
}) => {
|
|
const percentage = Math.min(Math.round((current / total) * 100), 100);
|
|
|
|
const formattedCurrent = new Intl.NumberFormat('ko-KR', {
|
|
style: 'currency',
|
|
currency: 'KRW',
|
|
maximumFractionDigits: 0
|
|
}).format(current);
|
|
|
|
const formattedTotal = new Intl.NumberFormat('ko-KR', {
|
|
style: 'currency',
|
|
currency: 'KRW',
|
|
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">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-neuro-income">
|
|
{categoryIcons[title]}
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-600">{title}</h3>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formattedCurrent}</p>
|
|
<p className="text-sm text-gray-500">/ {formattedTotal}</p>
|
|
</div>
|
|
|
|
<div className="relative h-3 neuro-pressed overflow-hidden">
|
|
<div
|
|
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-end">
|
|
<span className="text-xs font-medium text-gray-500">
|
|
{percentage}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetCard;
|