website refactor

apps/website/components/races/RaceStatusBadge.tsx

@@ -1,59 +1,38 @@
-import { Box } from '@/ui/primitives/Box';
+import { StatusBadge } from '@/ui/StatusBadge';
+import React from 'react';
 
 interface RaceStatusBadgeProps {
   status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
 }
 
 export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
-  const config = {
+  const config: Record<string, { variant: 'info' | 'success' | 'neutral' | 'warning'; label: string }> = {
     scheduled: {
-      variant: 'info' as const,
+      variant: 'info',
       label: 'SCHEDULED',
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30'
     },
     running: {
-      variant: 'success' as const,
+      variant: 'success',
       label: 'LIVE',
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30'
     },
     completed: {
-      variant: 'neutral' as const,
+      variant: 'neutral',
       label: 'COMPLETED',
-      color: 'text-gray-400',
-      bg: 'bg-gray-400/10',
-      border: 'border-gray-400/30'
     },
     cancelled: {
-      variant: 'warning' as const,
+      variant: 'warning',
       label: 'CANCELLED',
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30'
     },
   };
 
-  const badgeConfig = config[status as keyof typeof config] || {
-    variant: 'neutral' as const,
+  const badgeConfig = config[status] || {
+    variant: 'neutral',
     label: status.toUpperCase(),
-    color: 'text-gray-400',
-    bg: 'bg-gray-400/10',
-    border: 'border-gray-400/30'
   };
 
   return (
-    <Box 
-      px={2.5} 
-      py={0.5} 
-      rounded="none" 
-      border 
-      className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
-      style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
-    >
+    <StatusBadge variant={badgeConfig.variant}>
       {badgeConfig.label}
-    </Box>
+    </StatusBadge>
   );
 }