53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { categoryIcons } from '@/constants/categoryIcons';
|
|
import { formatCurrency } from '@/utils/formatters';
|
|
|
|
interface BudgetCategoriesSectionProps {
|
|
categories: {
|
|
title: string;
|
|
current: number;
|
|
total: number;
|
|
}[];
|
|
}
|
|
|
|
const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
|
|
categories
|
|
}) => {
|
|
return <>
|
|
<h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
|
|
<div className="neuro-card mb-8">
|
|
{categories.map((category, index) => (
|
|
<div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-neuro-income">
|
|
{categoryIcons[category.title]}
|
|
</div>
|
|
<h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</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 bg-neuro-income`}
|
|
style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-end">
|
|
<span className="text-xs font-medium text-gray-500">
|
|
{Math.min(Math.round((category.current / category.total) * 100), 100)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>;
|
|
};
|
|
|
|
export default BudgetCategoriesSection;
|