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

Refactor summary cards layout

Browse Source 
Moves amount to same line as icon and title in summary cards, and aligns amount to the right.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 09:44:53 +00:00
parent d50ab71da3
commit bd5ba8f397
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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