Refactor plus button style
- Modified the style of the plus button before "예산 수정하기" - Removed the white circle and increased the size of the plus icon - Kept the same color and animation
This commit is contained in:
@@ -3,17 +3,20 @@ import { CirclePlus, Save, Check } from 'lucide-react';
|
|||||||
import BudgetInputCard from './BudgetInputCard';
|
import BudgetInputCard from './BudgetInputCard';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import CategoryBudgetInputs from './CategoryBudgetInputs';
|
import CategoryBudgetInputs from './CategoryBudgetInputs';
|
||||||
|
|
||||||
interface BudgetData {
|
interface BudgetData {
|
||||||
targetAmount: number;
|
targetAmount: number;
|
||||||
spentAmount: number;
|
spentAmount: number;
|
||||||
remainingAmount: number;
|
remainingAmount: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BudgetTabContentProps {
|
interface BudgetTabContentProps {
|
||||||
data: BudgetData;
|
data: BudgetData;
|
||||||
formatCurrency: (amount: number) => string;
|
formatCurrency: (amount: number) => string;
|
||||||
calculatePercentage: (spent: number, target: number) => number;
|
calculatePercentage: (spent: number, target: number) => number;
|
||||||
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
|
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||||
data,
|
data,
|
||||||
formatCurrency,
|
formatCurrency,
|
||||||
@@ -75,6 +78,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [showBudgetInput]);
|
}, [showBudgetInput]);
|
||||||
|
|
||||||
return <div>
|
return <div>
|
||||||
{targetAmount > 0 ? <>
|
{targetAmount > 0 ? <>
|
||||||
<div className="flex justify-between items-center mb-3">
|
<div className="flex justify-between items-center mb-3">
|
||||||
@@ -99,16 +103,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
|||||||
|
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
|
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
|
||||||
<div className="mr-2 bg-neuro-income text-white rounded-full p-1 transition-transform group-hover:scale-110">
|
<CirclePlus size={26} className="mr-2 text-neuro-income animate-pulse transition-transform group-hover:scale-110" />
|
||||||
<CirclePlus size={20} className="animate-pulse" />
|
|
||||||
</div>
|
|
||||||
<span>예산 수정하기</span>
|
<span>예산 수정하기</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</> : <div className="py-4 text-center">
|
</> : <div className="py-4 text-center">
|
||||||
<div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
|
<div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
|
||||||
<Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
|
<Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
|
||||||
<CirclePlus className="mr-2" size={20} />
|
<CirclePlus className="mr-2" size={24} />
|
||||||
지금 예산 설정하기
|
지금 예산 설정하기
|
||||||
</Button>
|
</Button>
|
||||||
</div>}
|
</div>}
|
||||||
@@ -137,4 +139,5 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
|||||||
</div>}
|
</div>}
|
||||||
</div>;
|
</div>;
|
||||||
};
|
};
|
||||||
export default BudgetTabContent;
|
|
||||||
|
export default BudgetTabContent;
|
||||||
|
|||||||
Reference in New Issue
Block a user