website refactor

apps/website/ui/StatusIndicator.tsx

@@ -1,110 +1,94 @@
-
-
-import { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
-import { Icon } from './Icon';
+import { StatusDot } from './StatusDot';
+import { Badge } from './Badge';
 
-interface StatusIndicatorProps {
-  icon: LucideIcon;
-  label: string;
+export { Badge };
+
+export interface StatusIndicatorProps {
+  status?: 'live' | 'upcoming' | 'completed' | 'cancelled' | 'pending';
+  variant?: string; // Alias for status
+  label?: string;
   subLabel?: string;
-  variant: 'success' | 'warning' | 'danger' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: any; // Alias for status dot
 }
 
-export function StatusIndicator({ icon, label, subLabel, variant }: StatusIndicatorProps) {
-  const colors = {
-    success: {
-      text: 'text-performance-green',
-      bg: 'bg-green-500/10',
-      border: 'border-green-500/30',
-      icon: 'rgb(16, 185, 129)'
+export const StatusIndicator = ({ 
+  status, 
+  variant,
+  label,
+  subLabel,
+  size = 'md',
+  icon
+}: StatusIndicatorProps) => {
+  const activeStatus = (status || variant || 'pending') as any;
+  
+  const configMap: any = {
+    live: {
+      intent: 'success' as const,
+      pulse: true,
+      text: 'Live',
     },
-    warning: {
-      text: 'text-warning-amber',
-      bg: 'bg-yellow-500/10',
-      border: 'border-yellow-500/30',
-      icon: 'rgb(245, 158, 11)'
+    upcoming: {
+      intent: 'primary' as const,
+      pulse: false,
+      text: 'Upcoming',
+    },
+    completed: {
+      intent: 'telemetry' as const,
+      pulse: false,
+      text: 'Completed',
+    },
+    cancelled: {
+      intent: 'critical' as const,
+      pulse: false,
+      text: 'Cancelled',
+    },
+    pending: {
+      intent: 'warning' as const,
+      pulse: false,
+      text: 'Pending',
+    },
+    success: {
+      intent: 'success' as const,
+      pulse: false,
+      text: 'Success',
     },
     danger: {
-      text: 'text-red-400',
-      bg: 'bg-red-500/10',
-      border: 'border-red-500/30',
-      icon: 'rgb(239, 68, 68)'
+      intent: 'critical' as const,
+      pulse: false,
+      text: 'Danger',
+    },
+    warning: {
+      intent: 'warning' as const,
+      pulse: false,
+      text: 'Warning',
     },
-    info: {
-      text: 'text-primary-blue',
-      bg: 'bg-blue-500/10',
-      border: 'border-blue-500/30',
-      icon: 'rgb(59, 130, 246)'
-    }
   };
 
-  const config = colors[variant];
+  const config = configMap[activeStatus] || configMap.pending;
 
   return (
-    <Box 
-      display="flex" 
-      alignItems="center" 
-      justifyContent="between" 
-      p={2} 
-      rounded="lg" 
-      bg={config.bg} 
-      border 
-      borderColor={config.border}
-    >
-      <Box display="flex" alignItems="center" gap={2}>
-        <Icon icon={icon} size={4} color={config.icon} />
-        <Text size="sm" weight="semibold" color="text-white">{label}</Text>
-      </Box>
-      {subLabel && (
-        <Text size="xs" color="text-gray-400">
-          {subLabel}
+    <Box display="flex" alignItems="center" gap={2}>
+      <StatusDot intent={config.intent} pulse={config.pulse} size={size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'} />
+      <Box>
+        <Text size={size === 'lg' ? 'md' : 'sm'} weight="bold" variant="high" uppercase>
+          {label || config.text}
         </Text>
-      )}
+        {subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
+      </Box>
     </Box>
   );
-}
+};
 
-interface StatRowProps {
-  label: string;
-  value: string | number;
-  valueColor?: string;
-  valueFont?: 'sans' | 'mono';
-}
-
-export function StatRow({ label, value, valueColor = 'text-white', valueFont = 'sans' }: StatRowProps) {
-  return (
-    <Box display="flex" alignItems="center" justifyContent="between">
-      <Text size="xs" color="text-gray-500">{label}</Text>
-      <Text size="xs" weight="bold" color={valueColor} font={valueFont}>
-        {value}
-      </Text>
+export const StatRow = ({ label, value, subLabel, variant, valueColor, valueFont }: { label: string, value: string, subLabel?: string, variant?: string, valueColor?: string, valueFont?: string }) => (
+  <Box display="flex" alignItems="center" justifyContent="between" paddingY={2} borderBottom>
+    <Box>
+      <Text size="sm" variant="high">{label}</Text>
+      {subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
     </Box>
-  );
-}
-
-interface BadgeProps {
-  children: React.ReactNode;
-  variant: 'success' | 'warning' | 'danger' | 'info' | 'gray';
-  size?: 'xs' | 'sm';
-}
-
-export function Badge({ children, variant, size = 'xs' }: BadgeProps) {
-  const variants = {
-    success: 'bg-green-500/20 text-performance-green',
-    warning: 'bg-yellow-500/20 text-warning-amber',
-    danger: 'bg-red-500/20 text-red-400',
-    info: 'bg-blue-500/20 text-primary-blue',
-    gray: 'bg-gray-500/20 text-gray-400'
-  };
-
-  return (
-    <Box px={1} rounded="sm" bg={variants[variant]}>
-      <Text size={size} color="inherit">
-        {children}
-      </Text>
-    </Box>
-  );
-}
+    <Text size="sm" weight="bold" variant={variant as any || 'high'} color={valueColor} font={valueFont as any}>{value}</Text>
+  </Box>
+);