49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface SponsorMetricCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
color?: string;
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
}
|
|
|
|
export function SponsorMetricCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
color = 'text-primary-blue',
|
|
trend,
|
|
}: SponsorMetricCardProps) {
|
|
return (
|
|
<Box
|
|
bg="bg-iron-gray/50"
|
|
rounded="lg"
|
|
p={3}
|
|
border={true}
|
|
borderColor="border-charcoal-outline"
|
|
>
|
|
<Box display="flex" alignItems="center" gap={1.5} className={color} mb={1}>
|
|
<Icon icon={icon as any} size={4} />
|
|
<Text size="xs" weight="medium">{label}</Text>
|
|
</Box>
|
|
<Box display="flex" alignItems="baseline" gap={2}>
|
|
<Text size="xl" weight="bold" color="text-white">
|
|
{typeof value === 'number' ? value.toLocaleString() : value}
|
|
</Text>
|
|
{trend && (
|
|
<Text size="xs" color={trend.isPositive ? 'text-performance-green' : 'text-red-400'}>
|
|
{trend.isPositive ? '+' : ''}{trend.value}%
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|