51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, Shield } from 'lucide-react';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface UserStatsSummaryProps {
|
|
total: number;
|
|
activeCount: number;
|
|
adminCount: number;
|
|
}
|
|
|
|
export function UserStatsSummary({ total, activeCount, adminCount }: UserStatsSummaryProps) {
|
|
return (
|
|
<Grid cols={3} gap={4}>
|
|
<Surface variant="gradient-blue" rounded="xl" border padding={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>Total Users</Text>
|
|
<Text size="2xl" weight="bold" color="text-white">{total}</Text>
|
|
</Box>
|
|
<Icon icon={Users} size={6} color="#60a5fa" />
|
|
</Stack>
|
|
</Surface>
|
|
<Surface variant="gradient-green" rounded="xl" border padding={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>Active</Text>
|
|
<Text size="2xl" weight="bold" color="text-white">{activeCount}</Text>
|
|
</Box>
|
|
<Text color="text-performance-green" weight="bold">✓</Text>
|
|
</Stack>
|
|
</Surface>
|
|
<Surface variant="gradient-purple" rounded="xl" border padding={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>Admins</Text>
|
|
<Text size="2xl" weight="bold" color="text-white">{adminCount}</Text>
|
|
</Box>
|
|
<Icon icon={Shield} size={6} color="#a855f7" />
|
|
</Stack>
|
|
</Surface>
|
|
</Grid>
|
|
);
|
|
}
|