website refactor

2026-01-18 13:26:35 +01:00
parent 350c78504d
commit 0b301feb61
225 changed files with 1678 additions and 26666 deletions
--- a/apps/website/components/races/RaceJoinButton.tsx
+++ b/apps/website/components/races/RaceJoinButton.tsx
@@ -0,0 +1,124 @@
+
+
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { InfoBanner } from '@/ui/InfoBanner';
+import { Stack } from '@/ui/Stack';
+import { CheckCircle2, PlayCircle, UserMinus, UserPlus, XCircle } from 'lucide-react';
+
+interface RaceJoinButtonProps {
+  raceStatus: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  isUserRegistered: boolean;
+  canRegister: boolean;
+  onRegister: () => void;
+  onWithdraw: () => void;
+  onCancel: () => void;
+  onReopen?: () => void;
+  onEndRace?: () => void;
+  canReopenRace?: boolean;
+  isOwnerOrAdmin?: boolean;
+  isLoading?: {
+    register?: boolean;
+    withdraw?: boolean;
+    cancel?: boolean;
+    reopen?: boolean;
+  };
+}
+
+export function RaceJoinButton({
+  raceStatus,
+  isUserRegistered,
+  canRegister,
+  onRegister,
+  onWithdraw,
+  onCancel,
+  onReopen,
+  onEndRace,
+  canReopenRace = false,
+  isOwnerOrAdmin = false,
+  isLoading = {},
+}: RaceJoinButtonProps) {
+  // Show registration button for scheduled races
+  if (raceStatus === 'scheduled') {
+    if (canRegister && !isUserRegistered) {
+      return (
+        <Button
+          variant="primary"
+          fullWidth
+          onClick={onRegister}
+          disabled={isLoading.register}
+          icon={<Icon icon={UserPlus} size={4} />}
+        >
+          {isLoading.register ? 'Registering...' : 'Register for Race'}
+        </Button>
+      );
+    }
+
+    if (isUserRegistered) {
+      return (
+        <Stack gap={3} fullWidth>
+          <InfoBanner type="success" icon={CheckCircle2}>
+            You&apos;re Registered
+          </InfoBanner>
+          <Button
+            variant="secondary"
+            fullWidth
+            onClick={onWithdraw}
+            disabled={isLoading.withdraw}
+            icon={<Icon icon={UserMinus} size={4} />}
+          >
+            {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
+          </Button>
+        </Stack>
+      );
+    }
+
+    // Show cancel button for owners/admins
+    if (isOwnerOrAdmin) {
+      return (
+        <Button
+          variant="secondary"
+          fullWidth
+          onClick={onCancel}
+          disabled={isLoading.cancel}
+          icon={<Icon icon={XCircle} size={4} />}
+        >
+          {isLoading.cancel ? 'Cancelling...' : 'Cancel Race'}
+        </Button>
+      );
+    }
+
+    return null;
+  }
+
+  // Show end race button for running races (owners/admins only)
+  if (raceStatus === 'running' && isOwnerOrAdmin && onEndRace) {
+    return (
+      <Button
+        variant="primary"
+        fullWidth
+        onClick={onEndRace}
+        icon={<Icon icon={CheckCircle2} size={4} />}
+      >
+        End Race & Process Results
+      </Button>
+    );
+  }
+
+  // Show reopen button for completed/cancelled races (owners/admins only)
+  if ((raceStatus === 'completed' || raceStatus === 'cancelled') && canReopenRace && isOwnerOrAdmin && onReopen) {
+    return (
+      <Button
+        variant="secondary"
+        fullWidth
+        onClick={onReopen}
+        disabled={isLoading.reopen}
+        icon={<Icon icon={PlayCircle} size={4} />}
+      >
+        {isLoading.reopen ? 'Re-opening...' : 'Re-open Race'}
+      </Button>
+    );
+  }
+
+  return null;
+}