38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
|
|
interface StatGridItemProps {
|
|
label: string;
|
|
value: string | number;
|
|
color?: string;
|
|
icon?: LucideIcon;
|
|
}
|
|
|
|
export function StatGridItem({ label, value, color = 'text-white', icon }: StatGridItemProps) {
|
|
return (
|
|
<Box
|
|
p={4}
|
|
bg="bg-deep-graphite/60"
|
|
rounded="xl"
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
textAlign="center"
|
|
>
|
|
{icon && (
|
|
<Stack direction="row" align="center" justify="center" gap={2} mb={1} className={color}>
|
|
<Icon icon={icon} size={4} />
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="0.05em">{label}</Text>
|
|
</Stack>
|
|
)}
|
|
{!icon && (
|
|
<Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
|
|
)}
|
|
<Text size="3xl" weight="bold" color={color} block>{value}</Text>
|
|
</Box>
|
|
);
|
|
}
|