147 lines
3.6 KiB
TypeScript
147 lines
3.6 KiB
TypeScript
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>
|
|
);
|
|
}
|