60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
|
|
export interface MetricCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon?: LucideIcon;
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
}
|
|
|
|
export const MetricCard = ({
|
|
label,
|
|
value,
|
|
icon,
|
|
intent = 'primary',
|
|
trend
|
|
}: MetricCardProps) => {
|
|
return (
|
|
<Card variant="default">
|
|
<Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
|
|
<Box>
|
|
<Text size="xs" weight="bold" variant="low" uppercase>
|
|
{label}
|
|
</Text>
|
|
<Text size="2xl" weight="bold" variant="high" block marginTop={1}>
|
|
{value}
|
|
</Text>
|
|
</Box>
|
|
{icon && (
|
|
<Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
|
|
<Icon icon={icon} size={5} intent={intent} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{trend && (
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Text
|
|
size="xs"
|
|
weight="bold"
|
|
variant={trend.isPositive ? 'success' : 'critical'}
|
|
>
|
|
{trend.isPositive ? '+' : '-'}{Math.abs(trend.value)}%
|
|
</Text>
|
|
<Text size="xs" variant="low">
|
|
vs last period
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|