125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
|
|
|
|
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'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;
|
|
}
|