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

Refactor: Extract CategoryBudgetInputs

Browse Source 
Refactors BudgetTabContent.tsx by extracting the category budget functionality into a separate component. This improves code modularity and maintainability.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 04:06:28 +00:00
parent 834517e96f
commit 315f2e3917
3 changed files with 94 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/BudgetProgress.tsx Normal file
View File

@@ -0,0 +1,40 @@
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;

80
src/components/BudgetTabContent.tsx
View File

@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import BudgetProgress from './BudgetProgress';
import CategoryBudgetInputs from './CategoryBudgetInputs';
interface BudgetData {
targetAmount: number;
@@ -118,81 +119,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
);
};
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>
);
};
interface CategoryBudgetInputsProps {
categoryBudgets: CategoryBudget;
handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
}
const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
categoryBudgets,
handleCategoryInputChange
}) => {
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">식비</label>
<Input
value={categoryBudgets.식비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '식비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">생활비</label>
<Input
value={categoryBudgets.생활비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '생활비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">교통비</label>
<Input
value={categoryBudgets.교통비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '교통비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
</div>
);
};
export default BudgetTabContent;

52
src/components/CategoryBudgetInputs.tsx Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import { Input } from '@/components/ui/input';
interface CategoryBudget {
식비: number;
생활비: number;
교통비: number;
}
interface CategoryBudgetInputsProps {
categoryBudgets: CategoryBudget;
handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
}
const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
categoryBudgets,
handleCategoryInputChange
}) => {
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">식비</label>
<Input
value={categoryBudgets.식비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '식비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">생활비</label>
<Input
value={categoryBudgets.생활비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '생활비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">교통비</label>
<Input
value={categoryBudgets.교통비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '교통비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
</div>
);
};
export default CategoryBudgetInputs;