53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Stack } from './Stack';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
interface HorizontalStatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
subValue?: string;
|
|
icon: ReactNode;
|
|
iconBgColor?: string;
|
|
}
|
|
|
|
export function HorizontalStatCard({
|
|
label,
|
|
value,
|
|
subValue,
|
|
icon,
|
|
iconBgColor,
|
|
}: HorizontalStatCardProps) {
|
|
return (
|
|
<Card>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="full"
|
|
padding={3}
|
|
style={{ backgroundColor: iconBgColor }}
|
|
>
|
|
{icon}
|
|
</Surface>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-400" block mb={1}>
|
|
{label}
|
|
</Text>
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{value}
|
|
</Text>
|
|
{subValue && (
|
|
<Text size="sm" color="text-gray-400">
|
|
{subValue}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|