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

Refactor SummaryCards component

Browse Source 
Modify SummaryCards to display icon and title in one line with the amount below, centered.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 09:47:20 +00:00
parent bd5ba8f397
commit 8858bbca9e
1 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/analytics/SummaryCards.tsx
View File

@@ -24,45 +24,39 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
return (
<div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
<div className="neuro-card w-full">
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<div className="flex items-center justify-center gap-2 py-[5px]">
<Wallet size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">예산</p>
</div>
<p className="text-sm font-bold text-neuro-income text-right">
<p className="text-sm font-bold text-neuro-income text-center">
{formatCurrency(totalBudget)}
</p>
</div>
</div>
<div className="neuro-card w-full">
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<div className="flex items-center justify-center gap-2 py-[5px]">
<CreditCard size={24} className="text-gray-500" />
<p className="text-gray-500 font-medium text-base">지출</p>
</div>
<p className="text-sm font-bold text-neuro-income text-right">
<p className="text-sm font-bold text-neuro-income text-center">
{formatCurrency(totalExpense)}
</p>
</div>
</div>
<div className="neuro-card w-full">
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<div className="flex items-center justify-center gap-2 py-[5px]">
<Coins size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">잔액</p>
</div>
{isOverBudget ? (
<p className="text-sm font-bold text-red-500 text-right">
<p className="text-sm font-bold text-red-500 text-center">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
) : (
<p className="text-sm font-bold text-neuro-income text-right">
<p className="text-sm font-bold text-neuro-income text-center">
{formatCurrency(remainingBudget)}
</p>
)}
</div>
</div>
</div>
);
};