64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
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">
|
|
<h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
|
|
|
|
<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={cn(
|
|
"text-xs font-medium",
|
|
percentage >= 90 ? "text-neuro-expense" : "text-gray-500"
|
|
)}>
|
|
{percentage}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetCard;
|