website refactor
This commit is contained in:
@@ -1,100 +1,72 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { AlertTriangle, TestTube, CheckCircle2 } from 'lucide-react';
|
||||
import Button from '@/ui/Button';
|
||||
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 default function EndRaceModal({ raceId, raceName, onConfirm, onCancel }: EndRaceModalProps) {
|
||||
export function EndRaceModal({ raceId, raceName, onConfirm, onCancel, isOpen }: EndRaceModalProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md bg-iron-gray rounded-xl border border-charcoal-outline shadow-2xl">
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-warning-amber/10 border border-warning-amber/20">
|
||||
<TestTube className="w-6 h-6 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">Development Test Function</h2>
|
||||
<p className="text-sm text-gray-400">End Race & Process Results</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-warning-amber mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Development Only Feature</h3>
|
||||
<p className="text-sm text-gray-300 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div className="p-4 rounded-lg bg-performance-green/10 border border-performance-green/20">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-performance-green mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">What This Does</h3>
|
||||
<ul className="text-sm text-gray-300 space-y-1">
|
||||
<li>• Marks the race as completed</li>
|
||||
<li>• Generates realistic finishing positions</li>
|
||||
<li>• Updates driver ratings based on performance</li>
|
||||
<li>• Calculates championship points</li>
|
||||
<li>• Updates league standings</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
Race: <span className="text-white font-medium">{raceName}</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
ID: {raceId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onCancel}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onConfirm}
|
||||
className="flex-1 bg-performance-green hover:bg-performance-green/80"
|
||||
>
|
||||
<TestTube className="w-4 h-4 mr-2" />
|
||||
Run Test
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-4 pt-4 border-t border-charcoal-outline">
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
This action cannot be undone. Use only for testing purposes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user