71 lines
2 KiB
JavaScript
71 lines
2 KiB
JavaScript
/**
|
|
* 통계 카드 컴포넌트
|
|
* 대시보드 상단 통계 카드 그리드
|
|
*/
|
|
import React from 'react';
|
|
import { Users, Send, Inbox, ShieldAlert } from 'lucide-react';
|
|
|
|
/**
|
|
* 개별 통계 카드
|
|
*/
|
|
const StatCard = ({ title, value, icon: Icon, bgColor, iconBg }) => (
|
|
<div className={`${bgColor} rounded-2xl p-5 shadow-lg shadow-gray-200/50`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500 font-medium">{title}</p>
|
|
<p className="text-3xl font-bold text-gray-800 mt-1">{value || '0'}</p>
|
|
</div>
|
|
<div className={`${iconBg} p-3 rounded-xl`}>
|
|
<Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/**
|
|
* 통계 카드 그리드
|
|
* @param {Object} props
|
|
* @param {Object} props.stats - 통계 데이터
|
|
*/
|
|
const StatCards = ({ stats }) => {
|
|
const cards = [
|
|
{
|
|
title: '전체 사용자',
|
|
value: stats.userCount?.toLocaleString(),
|
|
icon: Users,
|
|
bgColor: 'bg-gradient-to-br from-white to-blue-50',
|
|
iconBg: 'bg-gradient-to-br from-blue-500 to-indigo-600'
|
|
},
|
|
{
|
|
title: '오늘 발송',
|
|
value: stats.sentToday?.toLocaleString(),
|
|
icon: Send,
|
|
bgColor: 'bg-gradient-to-br from-white to-green-50',
|
|
iconBg: 'bg-gradient-to-br from-green-500 to-emerald-600'
|
|
},
|
|
{
|
|
title: '오늘 수신',
|
|
value: stats.receivedToday?.toLocaleString(),
|
|
icon: Inbox,
|
|
bgColor: 'bg-gradient-to-br from-white to-purple-50',
|
|
iconBg: 'bg-gradient-to-br from-purple-500 to-violet-600'
|
|
},
|
|
{
|
|
title: '스팸 차단',
|
|
value: stats.totalSpam?.toLocaleString(),
|
|
icon: ShieldAlert,
|
|
bgColor: 'bg-gradient-to-br from-white to-red-50',
|
|
iconBg: 'bg-gradient-to-br from-red-500 to-rose-600'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{cards.map((card, index) => (
|
|
<StatCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatCards;
|