website refactor

apps/website/components/sponsors/MetricCard.tsx

@@ -1,10 +1,8 @@
+'use client';
+
 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';
+import { LucideIcon } from 'lucide-react';
+import { StatCard } from '@/ui/StatCard';
 
 interface MetricCardProps {
   title: string;
@@ -20,43 +18,23 @@ export function MetricCard({
   title,
   value,
   change,
-  icon: 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>
+    <StatCard
+      label={title}
+      value={value}
+      icon={icon}
+      trend={change !== undefined ? {
+        value: Math.abs(change),
+        isPositive: change > 0
+      } : undefined}
+      suffix={suffix}
+      prefix={prefix}
+      delay={delay}
+    />
   );
 }