86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
'use client';
|
||
|
||
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
|
||
import { Box } from '@/ui/Box';
|
||
import { Heading } from '@/ui/Heading';
|
||
import { InfoItem } from '@/ui/InfoItem';
|
||
import { Award, Calendar, Eye, Gamepad2, Hash, Trophy, Users } from 'lucide-react';
|
||
|
||
interface ReadonlyLeagueInfoProps {
|
||
league: {
|
||
id: string;
|
||
name: string;
|
||
ownerId: string;
|
||
createdAt?: string;
|
||
};
|
||
configForm: LeagueConfigFormModel;
|
||
}
|
||
|
||
export function ReadonlyLeagueInfo({ league, configForm }: ReadonlyLeagueInfoProps) {
|
||
const basics = configForm.basics;
|
||
const structure = configForm.structure;
|
||
const timings = configForm.timings;
|
||
const scoring = configForm.scoring;
|
||
|
||
const infoItems = [
|
||
{
|
||
icon: Hash,
|
||
label: 'League Name',
|
||
value: basics.name,
|
||
},
|
||
{
|
||
icon: Eye,
|
||
label: 'Visibility',
|
||
value: basics.visibility === 'public' ? 'Ranked' : 'Unranked',
|
||
},
|
||
{
|
||
icon: Users,
|
||
label: 'Structure',
|
||
value: structure.mode === 'solo'
|
||
? `Solo • ${structure.maxDrivers} drivers`
|
||
: `Teams • ${structure.maxTeams} × ${structure.driversPerTeam} drivers`,
|
||
},
|
||
{
|
||
icon: Gamepad2,
|
||
label: 'Platform',
|
||
value: 'iRacing',
|
||
},
|
||
{
|
||
icon: Award,
|
||
label: 'Scoring',
|
||
value: scoring.patternId ?? 'Standard',
|
||
},
|
||
{
|
||
icon: Calendar,
|
||
label: 'Created',
|
||
value: league.createdAt ? new Date(league.createdAt).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
}) : '—',
|
||
},
|
||
{
|
||
icon: Trophy,
|
||
label: 'Season',
|
||
value: `${timings.roundsPlanned ?? '—'} rounds`,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Box rounded="xl" border borderColor="border-charcoal-outline" bg="bg-iron-gray/40" p={5}>
|
||
<Heading level={5} color="text-gray-400" mb={4}>League Information</Heading>
|
||
|
||
<Box display="grid" responsiveGridCols={{ base: 2, sm: 3 }} gap={4}>
|
||
{infoItems.map((item, index) => (
|
||
<InfoItem
|
||
key={index}
|
||
icon={item.icon}
|
||
label={item.label}
|
||
value={item.value}
|
||
/>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|