mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
apps/website/components/leagues/LeagueReviewSummary.tsx
View File

@@ -1,14 +1,11 @@
'use client';
import {
FileText,
Users,
Calendar,
Trophy,
Award,
Rocket,
Eye,
EyeOff,
Gamepad2,
User,
UsersRound,
@@ -16,13 +13,18 @@ import {
Flag,
Zap,
Timer,
TrendingDown,
Check,
Globe,
Medal,
type LucideIcon,
} from 'lucide-react';
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
interface LeagueReviewSummaryProps {
form: LeagueConfigFormModel;
@@ -31,89 +33,73 @@ interface LeagueReviewSummaryProps {
// Individual review card component
function ReviewCard({
icon: Icon,
icon,
iconColor = 'text-primary-blue',
bgColor = 'bg-primary-blue/10',
title,
children,
}: {
icon: React.ElementType;
icon: LucideIcon;
iconColor?: string;
bgColor?: string;
title: string;
children: React.ReactNode;
}) {
return (
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 space-y-3">
<div className="flex items-center gap-3">
<div className={`flex h-9 w-9 items-center justify-center rounded-lg ${bgColor}`}>
<Icon className={`w-4 h-4 ${iconColor}`} />
</div>
<h3 className="text-sm font-semibold text-white">{title}</h3>
</div>
{children}
</div>
<Box rounded="xl" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline/40" p={4}>
<Stack gap={3}>
<Box display="flex" alignItems="center" gap={3}>
<Box display="flex" h="9" w="9" alignItems="center" justifyContent="center" rounded="lg" bg={bgColor}>
<Icon icon={icon} size={4} color={iconColor} />
</Box>
<Heading level={3} fontSize="sm" weight="semibold" color="text-white">{title}</Heading>
</Box>
{children}
</Stack>
</Box>
);
}
// Info row component for consistent layout
function InfoRow({
icon: Icon,
icon,
label,
value,
valueClass = '',
}: {
icon?: React.ElementType;
icon?: LucideIcon;
label: string;
value: React.ReactNode;
valueClass?: string;
}) {
return (
<div className="flex items-center justify-between py-2 border-b border-charcoal-outline/20 last:border-0">
<div className="flex items-center gap-2 text-xs text-gray-500">
{Icon && <Icon className="w-3.5 h-3.5" />}
<span>{label}</span>
</div>
<div className={`text-sm font-medium text-white ${valueClass}`}>{value}</div>
</div>
);
}
// Badge component for enabled features
function FeatureBadge({
icon: Icon,
label,
enabled,
color = 'primary-blue',
}: {
icon: React.ElementType;
label: string;
enabled: boolean;
color?: string;
}) {
if (!enabled) return null;
return (
<span className={`inline-flex items-center gap-1.5 rounded-full bg-${color}/10 px-3 py-1.5 text-xs font-medium text-${color}`}>
<Icon className="w-3 h-3" />
{label}
</span>
<Box display="flex" alignItems="center" justifyContent="between" py={2} borderBottom borderColor="border-charcoal-outline/20"
// eslint-disable-next-line gridpilot-rules/component-classification
className="last:border-0"
>
<Box display="flex" alignItems="center" gap={2}>
{icon && <Icon icon={icon} size={3.5} color="text-gray-500" />}
<Text size="xs" color="text-gray-500">{label}</Text>
</Box>
<Text size="sm" weight="medium" color="text-white"
// eslint-disable-next-line gridpilot-rules/component-classification
className={valueClass}
>
{value}
</Text>
</Box>
);
}
export default function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps) {
export function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps) {
const { basics, structure, timings, scoring, championships, dropPolicy, stewarding } = form;
const seasonName = (form as LeagueConfigFormModel & { seasonName?: string }).seasonName;
const modeLabel =
structure.mode === 'solo'
? 'Solo drivers'
: 'Team-based';
const modeDescription =
structure.mode === 'solo'
? 'Individual competition'
: 'Teams with fixed rosters';
const capacityValue = (() => {
if (structure.mode === 'solo') {
return typeof structure.maxDrivers === 'number' ? structure.maxDrivers : '—';
@@ -122,12 +108,12 @@ export default function LeagueReviewSummary({ form, presets }: LeagueReviewSumma
})();
const capacityLabel = structure.mode === 'solo' ? 'drivers' : 'teams';
const formatMinutes = (value: number | undefined) => {
if (typeof value !== 'number' || value <= 0) return '—';
return `${value} min`;
};
const getDropRuleInfo = () => {
if (dropPolicy.strategy === 'none') {
return { emoji: '✓', label: 'All count', description: 'Every race counts' };
@@ -148,31 +134,31 @@ export default function LeagueReviewSummary({ form, presets }: LeagueReviewSumma
}
return { emoji: '✓', label: 'All count', description: 'Every race counts' };
};
const dropRuleInfo = getDropRuleInfo();
const dropRuleInfo = getDropRuleInfo();
const preset = presets.find((p) => p.id === scoring.patternId) ?? null;
const preset = presets.find((p) => p.id === scoring.patternId) ?? null;
const seasonStartLabel =
timings.seasonStartDate
? new Date(timings.seasonStartDate).toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric',
})
: null;
const seasonStartLabel =
timings.seasonStartDate
? new Date(timings.seasonStartDate).toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric',
})
: null;
const stewardingLabel = (() => {
switch (stewarding.decisionMode) {
case 'admin_only':
return 'Admin-only decisions';
case 'steward_vote':
return 'Steward panel voting';
default:
return stewarding.decisionMode;
}
})();
const stewardingLabel = (() => {
switch (stewarding.decisionMode) {
case 'admin_only':
return 'Admin-only decisions';
case 'steward_vote':
return 'Steward panel voting';
default:
return stewarding.decisionMode;
}
})();
const getScoringEmoji = () => {
if (!preset) return '🏁';
const name = preset.name.toLowerCase();
@@ -181,14 +167,14 @@ const stewardingLabel = (() => {
if (name.includes('club') || name.includes('casual')) return '🏅';
return '🏁';
};
// Normalize visibility to new terminology
const isRanked = basics.visibility === 'public'; // public = ranked, private/unlisted = unranked
const visibilityLabel = isRanked ? 'Ranked' : 'Unranked';
const visibilityDescription = isRanked
? 'Competitive • Affects ratings'
: 'Casual • Friends only';
// Calculate total weekend duration
const totalWeekendMinutes = (timings.practiceMinutes ?? 0) +
(timings.qualifyingMinutes ?? 0) +
@@ -196,118 +182,138 @@ const stewardingLabel = (() => {
(timings.mainRaceMinutes ?? 0);
return (
<div className="space-y-6">
<Stack gap={6}>
{/* League Summary */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-300">League summary</h3>
<div className="relative rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray to-iron-gray border border-primary-blue/30 p-6 overflow-hidden">
<Stack gap={3}>
<Heading level={3} fontSize="sm" weight="semibold" color="text-gray-300">League summary</Heading>
<Box position="relative" rounded="2xl" bg="bg-gradient-to-br from-primary-blue/20 via-iron-gray to-iron-gray" border borderColor="border-primary-blue/30" p={6} overflow="hidden">
{/* Background decoration */}
<div className="absolute top-0 right-0 w-32 h-32 bg-primary-blue/10 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-24 h-24 bg-neon-aqua/5 rounded-full blur-2xl" />
<Box position="absolute" top="0" right="0" w="32" h="32" bg="bg-primary-blue/10" rounded="full"
// eslint-disable-next-line gridpilot-rules/component-classification
className="blur-3xl"
/>
<Box position="absolute" bottom="0" left="0" w="24" h="24" bg="bg-neon-aqua/5" rounded="full"
// eslint-disable-next-line gridpilot-rules/component-classification
className="blur-2xl"
/>
<div className="relative flex items-start gap-4">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/20 border border-primary-blue/30 shrink-0">
<Rocket className="w-7 h-7 text-primary-blue" />
</div>
<div className="flex-1 min-w-0">
<h2 className="text-xl font-bold text-white mb-1 truncate">
<Box position="relative" display="flex" alignItems="start" gap={4}>
<Box display="flex" h="14" w="14" alignItems="center" justifyContent="center" rounded="2xl" bg="bg-primary-blue/20" border borderColor="border-primary-blue/30" flexShrink={0}>
<Icon icon={Rocket} size={7} color="text-primary-blue" />
</Box>
<Box flexGrow={1} minWidth="0">
<Heading level={2} fontSize="xl" weight="bold" color="text-white" mb={1} truncate>
{basics.name || 'Your New League'}
</h2>
<p className="text-sm text-gray-400 mb-3">
</Heading>
<Text size="sm" color="text-gray-400" mb={3} block>
{basics.description || 'Ready to launch your racing series!'}
</p>
<div className="flex flex-wrap items-center gap-3">
</Text>
<Box display="flex" flexWrap="wrap" alignItems="center" gap={3}>
{/* Ranked/Unranked Badge */}
<span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium ${
isRanked
? 'bg-primary-blue/15 text-primary-blue border border-primary-blue/30'
: 'bg-neon-aqua/15 text-neon-aqua border border-neon-aqua/30'
}`}>
{isRanked ? <Trophy className="w-3 h-3" /> : <Users className="w-3 h-3" />}
<span className="font-semibold">{visibilityLabel}</span>
<span className="text-[10px] opacity-70">• {visibilityDescription}</span>
</span>
<span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
<Gamepad2 className="w-3 h-3" />
iRacing
</span>
<span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
{structure.mode === 'solo' ? <User className="w-3 h-3" /> : <UsersRound className="w-3 h-3" />}
{modeLabel}
</span>
</div>
</div>
</div>
</div>
</div>
<Box
as="span"
display="inline-flex"
alignItems="center"
gap={1.5}
rounded="full"
px={3}
py={1.5}
bg={isRanked ? 'bg-primary-blue/15' : 'bg-neon-aqua/15'}
color={isRanked ? 'text-primary-blue' : 'text-neon-aqua'}
border
borderColor={isRanked ? 'border-primary-blue/30' : 'border-neon-aqua/30'}
>
<Icon icon={isRanked ? Trophy : Users} size={3} />
<Text weight="semibold" size="xs">{visibilityLabel}</Text>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
opacity={0.7}
>
• {visibilityDescription}
</Text>
</Box>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="full" bg="bg-charcoal-outline/50" px={3} py={1} color="text-gray-300">
<Icon icon={Gamepad2} size={3} />
<Text size="xs" weight="medium">iRacing</Text>
</Box>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="full" bg="bg-charcoal-outline/50" px={3} py={1} color="text-gray-300">
<Icon icon={structure.mode === 'solo' ? User : UsersRound} size={3} />
<Text size="xs" weight="medium">{modeLabel}</Text>
</Box>
</Box>
</Box>
</Box>
</Box>
</Stack>
{/* Season Summary */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-300">First season summary</h3>
<div className="flex flex-wrap items-center gap-2 text-xs text-gray-400">
<span>{seasonName || 'First season of this league'}</span>
<Stack gap={3}>
<Heading level={3} fontSize="sm" weight="semibold" color="text-gray-300">First season summary</Heading>
<Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
<Text size="xs" color="text-gray-400">{seasonName || 'First season of this league'}</Text>
{seasonStartLabel && (
<>
<span>•</span>
<span>Starts {seasonStartLabel}</span>
<Text size="xs" color="text-gray-400">•</Text>
<Text size="xs" color="text-gray-400">Starts {seasonStartLabel}</Text>
</>
)}
{typeof timings.roundsPlanned === 'number' && (
<>
<span>•</span>
<span>{timings.roundsPlanned} rounds planned</span>
<Text size="xs" color="text-gray-400">•</Text>
<Text size="xs" color="text-gray-400">{timings.roundsPlanned} rounds planned</Text>
</>
)}
<span>•</span>
<span>Stewarding: {stewardingLabel}</span>
</div>
<Text size="xs" color="text-gray-400">•</Text>
<Text size="xs" color="text-gray-400">Stewarding: {stewardingLabel}</Text>
</Box>
{/* Stats Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={3}>
{/* Capacity */}
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10 mx-auto mb-2">
<Users className="w-5 h-5 text-primary-blue" />
</div>
<div className="text-2xl font-bold text-white">{capacityValue}</div>
<div className="text-xs text-gray-500">{capacityLabel}</div>
</div>
<Box rounded="xl" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline/40" p={4} textAlign="center">
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-primary-blue/10" mx="auto" mb={2}>
<Icon icon={Users} size={5} color="text-primary-blue" />
</Box>
<Text size="2xl" weight="bold" color="text-white" block>{capacityValue}</Text>
<Text size="xs" color="text-gray-500" block>{capacityLabel}</Text>
</Box>
{/* Rounds */}
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10 mx-auto mb-2">
<Flag className="w-5 h-5 text-performance-green" />
</div>
<div className="text-2xl font-bold text-white">{timings.roundsPlanned ?? '—'}</div>
<div className="text-xs text-gray-500">rounds</div>
</div>
<Box rounded="xl" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline/40" p={4} textAlign="center">
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-performance-green/10" mx="auto" mb={2}>
<Icon icon={Flag} size={5} color="text-performance-green" />
</Box>
<Text size="2xl" weight="bold" color="text-white" block>{timings.roundsPlanned ?? '—'}</Text>
<Text size="xs" color="text-gray-500" block>rounds</Text>
</Box>
{/* Weekend Duration */}
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10 mx-auto mb-2">
<Timer className="w-5 h-5 text-warning-amber" />
</div>
<div className="text-2xl font-bold text-white">{totalWeekendMinutes > 0 ? `${totalWeekendMinutes}` : '—'}</div>
<div className="text-xs text-gray-500">min/weekend</div>
</div>
<Box rounded="xl" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline/40" p={4} textAlign="center">
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-warning-amber/10" mx="auto" mb={2}>
<Icon icon={Timer} size={5} color="text-warning-amber" />
</Box>
<Text size="2xl" weight="bold" color="text-white" block>{totalWeekendMinutes > 0 ? `${totalWeekendMinutes}` : '—'}</Text>
<Text size="xs" color="text-gray-500" block>min/weekend</Text>
</Box>
{/* Championships */}
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neon-aqua/10 mx-auto mb-2">
<Award className="w-5 h-5 text-neon-aqua" />
</div>
<div className="text-2xl font-bold text-white">
<Box rounded="xl" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline/40" p={4} textAlign="center">
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-neon-aqua/10" mx="auto" mb={2}>
<Icon icon={Award} size={5} color="text-neon-aqua" />
</Box>
<Text size="2xl" weight="bold" color="text-white" block>
{[championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].filter(Boolean).length}
</div>
<div className="text-xs text-gray-500">championships</div>
</div>
</div>
</div>
</Text>
<Text size="xs" color="text-gray-500" block>championships</Text>
</Box>
</Box>
</Stack>
{/* Detail Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
{/* Schedule Card */}
<ReviewCard icon={Calendar} title="Race Weekend">
<div className="space-y-1">
<Stack gap={1}>
{timings.practiceMinutes && timings.practiceMinutes > 0 && (
<InfoRow icon={Clock} label="Practice" value={formatMinutes(timings.practiceMinutes)} />
)}
@@ -316,89 +322,98 @@ const stewardingLabel = (() => {
<InfoRow icon={Zap} label="Sprint Race" value={formatMinutes(timings.sprintRaceMinutes)} />
)}
<InfoRow icon={Flag} label="Main Race" value={formatMinutes(timings.mainRaceMinutes)} />
</div>
</Stack>
</ReviewCard>
{/* Scoring Card */}
<ReviewCard icon={Trophy} iconColor="text-warning-amber" bgColor="bg-warning-amber/10" title="Scoring System">
<div className="space-y-3">
<Stack gap={3}>
{/* Scoring Preset */}
<div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
<span className="text-2xl">{getScoringEmoji()}</span>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white">{preset?.name ?? 'Custom'}</div>
<div className="text-xs text-gray-500">{preset?.sessionSummary ?? 'Custom scoring enabled'}</div>
</div>
<Box display="flex" alignItems="center" gap={3} p={3} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline/30">
<Text size="2xl">{getScoringEmoji()}</Text>
<Box flexGrow={1} minWidth="0">
<Text size="sm" weight="medium" color="text-white" block>{preset?.name ?? 'Custom'}</Text>
<Text size="xs" color="text-gray-500" block>{preset?.sessionSummary ?? 'Custom scoring enabled'}</Text>
</Box>
{scoring.customScoringEnabled && (
<span className="px-2 py-0.5 rounded bg-primary-blue/20 text-[10px] font-medium text-primary-blue">Custom</span>
<Box as="span" px={2} py={0.5} rounded="sm" bg="bg-primary-blue/20">
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
weight="medium"
color="text-primary-blue"
>
Custom
</Text>
</Box>
)}
</div>
</Box>
{/* Drop Rule */}
<div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline/50">
<span className="text-base">{dropRuleInfo.emoji}</span>
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white">{dropRuleInfo.label}</div>
<div className="text-xs text-gray-500">{dropRuleInfo.description}</div>
</div>
</div>
</div>
<Box display="flex" alignItems="center" gap={3} p={3} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline/30">
<Box display="flex" h="8" w="8" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline/50">
<Text size="base">{dropRuleInfo.emoji}</Text>
</Box>
<Box flexGrow={1} minWidth="0">
<Text size="sm" weight="medium" color="text-white" block>{dropRuleInfo.label}</Text>
<Text size="xs" color="text-gray-500" block>{dropRuleInfo.description}</Text>
</Box>
</Box>
</Stack>
</ReviewCard>
</div>
</Box>
{/* Championships Section */}
<ReviewCard icon={Award} iconColor="text-neon-aqua" bgColor="bg-neon-aqua/10" title="Active Championships">
<div className="flex flex-wrap gap-2">
<Box display="flex" flexWrap="wrap" gap={2}>
{championships.enableDriverChampionship && (
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
<Trophy className="w-3.5 h-3.5" />
Driver Championship
<Check className="w-3 h-3 text-performance-green" />
</span>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="lg" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={2}>
<Icon icon={Trophy} size={3.5} color="text-primary-blue" />
<Text size="xs" weight="medium" color="text-primary-blue">Driver Championship</Text>
<Icon icon={Check} size={3} color="text-performance-green" />
</Box>
)}
{championships.enableTeamChampionship && (
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
<Award className="w-3.5 h-3.5" />
Team Championship
<Check className="w-3 h-3 text-performance-green" />
</span>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="lg" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={2}>
<Icon icon={Award} size={3.5} color="text-primary-blue" />
<Text size="xs" weight="medium" color="text-primary-blue">Team Championship</Text>
<Icon icon={Check} size={3} color="text-performance-green" />
</Box>
)}
{championships.enableNationsChampionship && (
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
<Globe className="w-3.5 h-3.5" />
Nations Cup
<Check className="w-3 h-3 text-performance-green" />
</span>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="lg" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={2}>
<Icon icon={Globe} size={3.5} color="text-primary-blue" />
<Text size="xs" weight="medium" color="text-primary-blue">Nations Cup</Text>
<Icon icon={Check} size={3} color="text-performance-green" />
</Box>
)}
{championships.enableTrophyChampionship && (
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
<Medal className="w-3.5 h-3.5" />
Trophy Championship
<Check className="w-3 h-3 text-performance-green" />
</span>
<Box as="span" display="inline-flex" alignItems="center" gap={1.5} rounded="lg" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={2}>
<Icon icon={Medal} size={3.5} color="text-primary-blue" />
<Text size="xs" weight="medium" color="text-primary-blue">Trophy Championship</Text>
<Icon icon={Check} size={3} color="text-performance-green" />
</Box>
)}
{![championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].some(Boolean) && (
<span className="text-sm text-gray-500">No championships enabled</span>
<Text size="sm" color="text-gray-500">No championships enabled</Text>
)}
</div>
</Box>
</ReviewCard>
{/* Ready to launch message */}
<div className="rounded-xl bg-performance-green/5 border border-performance-green/20 p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/20">
<Check className="w-5 h-5 text-performance-green" />
</div>
<div>
<p className="text-sm font-medium text-white">Ready to launch!</p>
<p className="text-xs text-gray-400">
Click "Create League" to launch your racing series. You can modify all settings later.
</p>
</div>
</div>
</div>
</div>
<Box rounded="xl" bg="bg-performance-green/5" border borderColor="border-performance-green/20" p={4}>
<Box display="flex" alignItems="center" gap={3}>
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-performance-green/20">
<Icon icon={Check} size={5} color="text-performance-green" />
</Box>
<Box>
<Text size="sm" weight="medium" color="text-white" block>Ready to launch!</Text>
<Text size="xs" color="text-gray-400" block>
Click &quot;Create League&quot; to launch your racing series. You can modify all settings later.
</Text>
</Box>
</Box>
</Box>
</Stack>
);
}