website refactor

apps/website/components/races/RaceStatusBadge.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface RaceStatusBadgeProps {
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
+}
+
+export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
+  const config = {
+    scheduled: {
+      variant: 'info' as const,
+      label: 'SCHEDULED',
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30'
+    },
+    running: {
+      variant: 'success' as const,
+      label: 'LIVE',
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30'
+    },
+    completed: {
+      variant: 'neutral' as const,
+      label: 'COMPLETED',
+      color: 'text-gray-400',
+      bg: 'bg-gray-400/10',
+      border: 'border-gray-400/30'
+    },
+    cancelled: {
+      variant: 'warning' as const,
+      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,
+    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' }}
+    >
+      {badgeConfig.label}
+    </Box>
+  );
+}