37 lines
978 B
TypeScript
37 lines
978 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface StatGridItemProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon?: LucideIcon;
|
|
color?: string;
|
|
}
|
|
|
|
/**
|
|
* StatGridItem
|
|
*
|
|
* A simple stat display for use in a grid.
|
|
*/
|
|
export function StatGridItem({ label, value, icon, color = 'text-primary-blue' }: StatGridItemProps) {
|
|
return (
|
|
<Box p={4} textAlign="center">
|
|
{icon && (
|
|
<Stack direction="row" align="center" justify="center" gap={2} mb={1} color={color}>
|
|
<Icon icon={icon} size={4} />
|
|
</Stack>
|
|
)}
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{value}
|
|
</Text>
|
|
<Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|