47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface HorizontalStatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon: LucideIcon;
|
|
iconColor?: string;
|
|
iconBgColor?: string;
|
|
}
|
|
|
|
export function HorizontalStatCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
iconColor = 'text-primary-blue',
|
|
iconBgColor = 'rgba(59, 130, 246, 0.1)',
|
|
}: HorizontalStatCardProps) {
|
|
return (
|
|
<Surface variant="muted" rounded="xl" border p={4}>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
p={3}
|
|
backgroundColor={iconBgColor}
|
|
>
|
|
<Icon icon={icon} size={5} color={iconColor} />
|
|
</Surface>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
|
|
{label}
|
|
</Text>
|
|
<Text size="xl" weight="bold" color="text-white" block>
|
|
{value}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|