63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { ArrowUpRight, ArrowDownRight, LucideIcon } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
change?: number;
|
|
icon: LucideIcon;
|
|
suffix?: string;
|
|
prefix?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export function MetricCard({
|
|
title,
|
|
value,
|
|
change,
|
|
icon: Icon,
|
|
suffix = '',
|
|
prefix = '',
|
|
delay = 0,
|
|
}: MetricCardProps) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const isPositive = change && change > 0;
|
|
const isNegative = change && change < 0;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay }}
|
|
style={{ height: '100%' }}
|
|
>
|
|
<Card style={{ height: '100%', padding: '1.25rem' }}>
|
|
<Stack gap={3}>
|
|
<Stack direction="row" align="start" justify="between">
|
|
<Box style={{ display: 'flex', height: '2.75rem', width: '2.75rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
|
<Icon style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />
|
|
</Box>
|
|
{change !== undefined && (
|
|
<Stack direction="row" align="center" gap={1} style={{ fontSize: '0.875rem', fontWeight: 500, color: isPositive ? '#10b981' : isNegative ? '#ef4444' : '#9ca3af' }}>
|
|
{isPositive ? <ArrowUpRight style={{ width: '1rem', height: '1rem' }} /> : isNegative ? <ArrowDownRight style={{ width: '1rem', height: '1rem' }} /> : null}
|
|
<Text size="sm" weight="medium">{Math.abs(change)}%</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
<Box>
|
|
<Text size="2xl" weight="bold" color="text-white" style={{ marginBottom: '0.25rem', display: 'block' }}>
|
|
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400">{title}</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
}
|