122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { UserPlus, UserMinus, CheckCircle2, PlayCircle, XCircle } from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
|
|
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"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={onRegister}
|
|
disabled={isLoading.register}
|
|
>
|
|
<UserPlus className="w-4 h-4" />
|
|
{isLoading.register ? 'Registering...' : 'Register for Race'}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (isUserRegistered) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
|
|
<CheckCircle2 className="w-5 h-5" />
|
|
<span className="font-medium">You're Registered</span>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={onWithdraw}
|
|
disabled={isLoading.withdraw}
|
|
>
|
|
<UserMinus className="w-4 h-4" />
|
|
{isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Show cancel button for owners/admins
|
|
if (isOwnerOrAdmin) {
|
|
return (
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={onCancel}
|
|
disabled={isLoading.cancel}
|
|
>
|
|
<XCircle className="w-4 h-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"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={onEndRace}
|
|
>
|
|
<CheckCircle2 className="w-4 h-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"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={onReopen}
|
|
disabled={isLoading.reopen}
|
|
>
|
|
<PlayCircle className="w-4 h-4" />
|
|
{isLoading.reopen ? 'Re-opening...' : 'Re-open Race'}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
} |