110 lines
4.7 KiB
TypeScript
110 lines
4.7 KiB
TypeScript
|
|
|
|
import type { LeagueSettingsViewData } from '@/lib/view-data/LeagueSettingsViewData';
|
|
import { Box } from '@/ui/Box';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { GridItem } from '@/ui/GridItem';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Clock, Settings, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
|
|
|
|
interface LeagueSettingsTemplateProps {
|
|
viewData: LeagueSettingsViewData;
|
|
}
|
|
|
|
export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
|
|
return (
|
|
<Stack gap={8}>
|
|
<Stack gap={6}>
|
|
{/* League Information */}
|
|
<Surface variant="dark" border rounded="lg" padding={6}>
|
|
<Stack gap={6}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box p={2} bg="rgba(25,140,255,0.1)" rounded="md" border borderColor="rgba(25,140,255,0.2)">
|
|
<Icon icon={Settings} size={5} color="primary-accent" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={5} color="primary-accent">LEAGUE INFORMATION</Heading>
|
|
<Text size="xs" color="text-gray-500">Basic league details and identification</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Grid responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
|
|
<InfoItem label="Name" value={viewData.league.name} />
|
|
<InfoItem label="Visibility" value={viewData.config.basics.visibility} capitalize />
|
|
<GridItem responsiveColSpan={{ base: 1, md: 2 }}>
|
|
<InfoItem label="Description" value={viewData.config.basics.description || ''} />
|
|
</GridItem>
|
|
<InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
|
|
<InfoItem label="Owner ID" value={viewData.league.ownerId} />
|
|
</Grid>
|
|
</Stack>
|
|
</Surface>
|
|
|
|
{/* Configuration */}
|
|
<Surface variant="dark" border rounded="lg" padding={6}>
|
|
<Stack gap={6}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box p={2} bg="rgba(16,185,129,0.1)" rounded="md" border borderColor="rgba(16,185,129,0.2)">
|
|
<Icon icon={Trophy} size={5} color="text-success-green" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={5} color="text-success-green">CONFIGURATION</Heading>
|
|
<Text size="xs" color="text-gray-500">League rules and participation limits</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Grid responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
|
|
<ConfigItem icon={Users} label="Max Drivers" value={viewData.config.structure.maxDrivers || 0} />
|
|
<ConfigItem icon={Shield} label="Require Approval" value={viewData.config.stewarding.requireDefense ? 'Yes' : 'No'} />
|
|
<ConfigItem icon={Clock} label="Allow Late Join" value={'No'} />
|
|
<ConfigItem icon={Trophy} label="Scoring Preset" value={viewData.config.scoring.patternId || 'None'} />
|
|
</Grid>
|
|
</Stack>
|
|
</Surface>
|
|
|
|
{/* Note about forms */}
|
|
<Surface variant="dark" border rounded="lg" padding={8}>
|
|
<Stack align="center" gap={4}>
|
|
<Box p={4} bg="rgba(245,158,11,0.1)" rounded="full" border borderColor="rgba(245,158,11,0.2)">
|
|
<Icon icon={Settings} size={8} color="warning-amber" />
|
|
</Box>
|
|
<Box textAlign="center">
|
|
<Heading level={3}>Settings Management</Heading>
|
|
<Text size="sm" color="text-gray-400" mt={2} block>
|
|
Form-based editing and ownership transfer functionality will be implemented in future updates.
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function InfoItem({ label, value, capitalize }: { label: string, value: string, capitalize?: boolean }) {
|
|
return (
|
|
<Box>
|
|
<Text size="xs" weight="bold" color="text-gray-500" block mb={1} letterSpacing="wider">{label.toUpperCase()}</Text>
|
|
<Text color="white" weight="medium">{capitalize ? value.toUpperCase() : value}</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function ConfigItem({ icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box display="flex" alignItems="center" justifyContent="center" w={10} h={10} rounded="lg" bg="rgba(255,255,255,0.05)">
|
|
<Icon icon={icon} size={5} color="text-gray-400" />
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" weight="bold" color="text-gray-500" block letterSpacing="wider">{label.toUpperCase()}</Text>
|
|
<Text color="white" weight="medium">{value}</Text>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|