website refactor

apps/website/components/leaderboards/DeltaChip.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
+import { Group } from '@/ui/Group';
 import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
 import React from 'react';
 
@@ -12,10 +13,10 @@ interface DeltaChipProps {
 export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
   if (value === 0) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+      <Group gap={1}>
         <Icon icon={Minus} size={3} intent="low" />
         <Text size="xs" font="mono" variant="low">0</Text>
-      </div>
+      </Group>
     );
   }
 
@@ -26,12 +27,12 @@ export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
 
   return (
     <Badge variant={variant} size="sm">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
+      <Group gap={0.5}>
         <Icon icon={IconComponent} size={3} />
         <Text size="xs" font="mono" weight="bold">
           {absoluteValue}
         </Text>
-      </div>
+      </Group>
     </Badge>
   );
 }