website refactor

apps/website/components/races/RaceActionBar.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Trophy, Scale, LogOut, CheckCircle, XCircle, PlayCircle } from 'lucide-react';
+
+interface RaceActionBarProps {
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
+  isUserRegistered: boolean;
+  canRegister: boolean;
+  onRegister?: () => void;
+  onWithdraw?: () => void;
+  onResultsClick?: () => void;
+  onStewardingClick?: () => void;
+  onFileProtest?: () => void;
+  isAdmin?: boolean;
+  onCancel?: () => void;
+  onReopen?: () => void;
+  onEndRace?: () => void;
+  isLoading?: {
+    register?: boolean;
+    withdraw?: boolean;
+    cancel?: boolean;
+    reopen?: boolean;
+    complete?: boolean;
+  };
+}
+
+export function RaceActionBar({
+  status,
+  isUserRegistered,
+  canRegister,
+  onRegister,
+  onWithdraw,
+  onResultsClick,
+  onStewardingClick,
+  onFileProtest,
+  isAdmin,
+  onCancel,
+  onReopen,
+  onEndRace,
+  isLoading = {}
+}: RaceActionBarProps) {
+  return (
+    <Stack direction="row" gap={3} wrap>
+      {status === 'scheduled' && (
+        <>
+          {!isUserRegistered && canRegister && (
+            <Button 
+              variant="primary" 
+              onClick={onRegister} 
+              disabled={isLoading.register}
+              icon={<Icon icon={CheckCircle} size={4} />}
+            >
+              Register
+            </Button>
+          )}
+          {isUserRegistered && (
+            <Button 
+              variant="secondary" 
+              onClick={onWithdraw} 
+              disabled={isLoading.withdraw}
+              icon={<Icon icon={LogOut} size={4} />}
+            >
+              Withdraw
+            </Button>
+          )}
+          {isAdmin && (
+            <Button 
+              variant="danger" 
+              onClick={onCancel} 
+              disabled={isLoading.cancel}
+              icon={<Icon icon={XCircle} size={4} />}
+            >
+              Cancel Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'running' && (
+        <>
+          <Button variant="race-final" disabled icon={<Icon icon={PlayCircle} size={4} />}>
+            Live Now
+          </Button>
+          {isAdmin && (
+            <Button 
+              variant="primary" 
+              onClick={onEndRace} 
+              disabled={isLoading.complete}
+            >
+              End Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'completed' && (
+        <>
+          <Button 
+            variant="primary" 
+            onClick={onResultsClick} 
+            icon={<Icon icon={Trophy} size={4} />}
+          >
+            View Results
+          </Button>
+          {isUserRegistered && onFileProtest && (
+            <Button 
+              variant="secondary" 
+              onClick={onFileProtest} 
+              icon={<Icon icon={Scale} size={4} />}
+            >
+              File Protest
+            </Button>
+          )}
+          <Button 
+            variant="secondary" 
+            onClick={onStewardingClick} 
+            icon={<Icon icon={Scale} size={4} />}
+          >
+            Stewarding
+          </Button>
+          {isAdmin && onReopen && (
+            <Button 
+              variant="secondary" 
+              onClick={onReopen} 
+              disabled={isLoading.reopen}
+            >
+              Reopen Race
+            </Button>
+          )}
+        </>
+      )}
+
+      {status === 'cancelled' && isAdmin && onReopen && (
+        <Button 
+          variant="primary" 
+          onClick={onReopen} 
+          disabled={isLoading.reopen}
+        >
+          Reopen Race
+        </Button>
+      )}
+    </Stack>
+  );
+}