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

Adjust card width for mobile

Browse Source 
Adjust card width to fit mobile screens.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-16 05:53:36 +00:00
parent 71d21b9e6e
commit 13bff57266
3 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
import React from 'react';
import { Wallet, CreditCard, PiggyBank } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';
import { useIsMobile } from '@/hooks/use-mobile';
interface SummaryCardsProps {
totalBudget: number;
@@ -14,9 +15,11 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
totalExpense,
savingsPercentage
}) => {
const isMobile = useIsMobile();
return (
<div className="grid grid-cols-3 gap-3 mb-8">
<div className="neuro-card">
<div className={`grid ${isMobile ? 'grid-cols-1 gap-3' : 'grid-cols-3 gap-3'} mb-8`}>
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<Wallet size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">예산</p>
@@ -25,7 +28,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
{formatCurrency(totalBudget)}
</p>
</div>
<div className="neuro-card">
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<CreditCard size={24} className="text-gray-500" />
<p className="text-gray-500 font-medium text-base">지출</p>
@@ -34,7 +37,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
{formatCurrency(totalExpense)}
</p>
</div>
<div className="neuro-card">
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<PiggyBank size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">저축</p>