42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { ShieldCheck, UserCheck, Users, UserX } from 'lucide-react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
|
|
import type { UserSummary } from '../../../../interfaces/user/model'
|
|
import styles from './index.module.scss'
|
|
|
|
interface SummaryCardsProps {
|
|
summary: UserSummary
|
|
}
|
|
|
|
interface SummaryCard {
|
|
label: string
|
|
value: number
|
|
detail: string
|
|
icon: LucideIcon
|
|
tone: string
|
|
}
|
|
|
|
export default function SummaryCards({ summary }: SummaryCardsProps) {
|
|
const cards: SummaryCard[] = [
|
|
{ label: '全部用户', value: summary.total, detail: '当前组织账号', icon: Users, tone: 'teal' },
|
|
{ label: '活跃用户', value: summary.active, detail: '可以正常访问', icon: UserCheck, tone: 'green' },
|
|
{ label: '未激活', value: summary.inactive, detail: '等待重新启用', icon: UserX, tone: 'amber' },
|
|
{ label: '管理员', value: summary.admins, detail: '拥有管理权限', icon: ShieldCheck, tone: 'navy' },
|
|
]
|
|
|
|
return (
|
|
<section className={`summary-grid ${styles.root}`} aria-label="用户概览">
|
|
{cards.map((card) => {
|
|
const Icon = card.icon
|
|
return (
|
|
<article className={`summary-card ${card.tone}`} key={card.label}>
|
|
<div className="summary-card-top"><span>{card.label}</span><b aria-hidden="true"><Icon size={15} /></b></div>
|
|
<strong>{card.value}</strong>
|
|
<small>{card.detail}</small>
|
|
</article>
|
|
)
|
|
})}
|
|
</section>
|
|
)
|
|
}
|