65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface MetricCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon?: LucideIcon;
|
|
color?: string;
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
border?: boolean;
|
|
bg?: string;
|
|
}
|
|
|
|
/**
|
|
* A semantic component for displaying metrics.
|
|
* Instrument-grade typography and dense-but-readable hierarchy.
|
|
*/
|
|
export function MetricCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
color = 'text-primary-accent',
|
|
trend,
|
|
border = true,
|
|
bg = 'panel-gray/40',
|
|
}: MetricCardProps) {
|
|
return (
|
|
<Box
|
|
bg={bg}
|
|
rounded="none"
|
|
p={4}
|
|
border={border}
|
|
borderColor="border-gray/30"
|
|
display="flex"
|
|
flexDirection="col"
|
|
gap={2}
|
|
hoverBg="panel-gray/60"
|
|
transition
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{icon && <Icon icon={icon} size={4} className={color} />}
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
{trend && (
|
|
<Text size="xs" color={trend.isPositive ? 'text-success-green' : 'text-red-400'} font="mono">
|
|
{trend.isPositive ? '▲' : '▼'} {trend.value}%
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
<Text size="2xl" weight="bold" color="text-white" font="mono">
|
|
{typeof value === 'number' ? value.toLocaleString() : value}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|