55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
|
|
import Card from '@/components/ui/Card';
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
change?: number;
|
|
icon: React.ElementType;
|
|
suffix?: string;
|
|
prefix?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export default 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 }}
|
|
>
|
|
<Card className="p-5 h-full">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
|
|
<Icon className="w-5 h-5 text-primary-blue" />
|
|
</div>
|
|
{change !== undefined && (
|
|
<div className={`flex items-center gap-1 text-sm font-medium ${
|
|
isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
|
|
}`}>
|
|
{isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
|
|
{Math.abs(change)}%
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-2xl font-bold text-white mb-1">
|
|
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
|
</div>
|
|
<div className="text-sm text-gray-400">{title}</div>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
} |