Files
gridpilot.gg/apps/website/components/leagues/EndRaceModal.tsx
2026-01-15 17:12:24 +01:00

73 lines
2.5 KiB
TypeScript

'use client';
import React from 'react';
import { TestTube } from 'lucide-react';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Modal } from '@/ui/Modal';
import { InfoBanner } from '@/ui/InfoBanner';
import { Box } from '@/ui/Box';
import { ModalIcon } from '@/ui/ModalIcon';
interface EndRaceModalProps {
raceId: string;
raceName: string;
onConfirm: () => void;
onCancel: () => void;
isOpen: boolean;
}
export function EndRaceModal({ raceId, raceName, onConfirm, onCancel, isOpen }: EndRaceModalProps) {
return (
<Modal
isOpen={isOpen}
onOpenChange={(open) => !open && onCancel()}
title="Development Test Function"
description="End Race & Process Results"
icon={
<ModalIcon
icon={TestTube}
color="text-warning-amber"
bgColor="bg-warning-amber/10"
borderColor="border-warning-amber/20"
/>
}
primaryActionLabel="Run Test"
onPrimaryAction={onConfirm}
secondaryActionLabel="Cancel"
onSecondaryAction={onCancel}
footer={
<Text size="xs" color="text-gray-500" align="center" block>
This action cannot be undone. Use only for testing purposes.
</Text>
}
>
<Stack gap={4}>
<InfoBanner type="warning" title="Development Only Feature">
This is a development/testing function to simulate ending a race and processing results.
It will generate realistic race results, update driver ratings, and calculate final standings.
</InfoBanner>
<InfoBanner type="success" title="What This Does">
<Stack as="ul" gap={1}>
<Text as="li" size="sm" color="text-gray-300"> Marks the race as completed</Text>
<Text as="li" size="sm" color="text-gray-300"> Generates realistic finishing positions</Text>
<Text as="li" size="sm" color="text-gray-300"> Updates driver ratings based on performance</Text>
<Text as="li" size="sm" color="text-gray-300"> Calculates championship points</Text>
<Text as="li" size="sm" color="text-gray-300"> Updates league standings</Text>
</Stack>
</InfoBanner>
<Box textAlign="center">
<Text size="sm" color="text-gray-400">
Race: <Text color="text-white" weight="medium">{raceName}</Text>
</Text>
<Text size="xs" color="text-gray-500" block mt={1}>
ID: {raceId}
</Text>
</Box>
</Stack>
</Modal>
);
}