49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Users, UserPlus } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
|
|
interface TeamHeroStatsProps {
|
|
teamCount: number;
|
|
recruitingCount: number;
|
|
}
|
|
|
|
export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
px={3}
|
|
py={2}
|
|
rounded="lg"
|
|
bg="bg-iron-gray/50"
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
>
|
|
<Icon icon={Users} size={4} color="text-purple-400" />
|
|
<Text weight="semibold" color="text-white">{teamCount}</Text>
|
|
<Text size="sm" color="text-gray-500">Teams</Text>
|
|
</Box>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
px={3}
|
|
py={2}
|
|
rounded="lg"
|
|
bg="bg-iron-gray/50"
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
>
|
|
<Icon icon={UserPlus} size={4} color="text-performance-green" />
|
|
<Text weight="semibold" color="text-white">{recruitingCount}</Text>
|
|
<Text size="sm" color="text-gray-500">Recruiting</Text>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|