website refactor

apps/website/components/leaderboards/DeltaChip.tsx

@@ -1,7 +1,8 @@
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
+import React from 'react';
 
 interface DeltaChipProps {
   value: number;
@@ -11,40 +12,26 @@ interface DeltaChipProps {
 export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
   if (value === 0) {
     return (
-      <Box display="flex" alignItems="center" gap={1} color="text-gray-600">
-        <Icon icon={Minus} size={3} />
-        <Text size="xs" font="mono">0</Text>
-      </Box>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+        <Icon icon={Minus} size={3} intent="low" />
+        <Text size="xs" font="mono" variant="low">0</Text>
+      </div>
     );
   }
 
   const isPositive = value > 0;
-  const color = isPositive 
-    ? (type === 'rank' ? 'text-performance-green' : 'text-performance-green') 
-    : (type === 'rank' ? 'text-error-red' : 'text-error-red');
-  
-  // For rank, positive delta usually means dropping positions (e.g. +1 rank means 1st -> 2nd)
-  // But usually "Delta" in leaderboards means "positions gained/lost"
-  // Let's assume value is "positions gained" (positive = up, negative = down)
-  
+  const variant = isPositive ? 'success' : 'critical';
   const IconComponent = isPositive ? ChevronUp : ChevronDown;
   const absoluteValue = Math.abs(value);
 
   return (
-    <Box 
-      display="flex" 
-      alignItems="center" 
-      gap={0.5} 
-      color={color}
-      bg={`${color.replace('text-', 'bg-')}/10`}
-      px={1.5}
-      py={0.5}
-      rounded="full"
-    >
-      <Icon icon={IconComponent} size={3} />
-      <Text size="xs" font="mono" weight="bold">
-        {absoluteValue}
-      </Text>
-    </Box>
+    <Badge variant={variant} size="sm">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
+        <Icon icon={IconComponent} size={3} />
+        <Text size="xs" font="mono" weight="bold">
+          {absoluteValue}
+        </Text>
+      </div>
+    </Badge>
   );
 }