117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { GridItem } from '@/ui/GridItem';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Settings, Users, Trophy, Shield, Clock } from 'lucide-react';
|
|
import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
|
|
|
|
interface LeagueSettingsTemplateProps {
|
|
viewData: LeagueSettingsViewData;
|
|
}
|
|
|
|
export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Box>
|
|
<Heading level={2}>League Settings</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
Manage your league configuration and preferences
|
|
</Text>
|
|
</Box>
|
|
|
|
<Stack gap={6}>
|
|
{/* League Information */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
|
<Icon icon={Settings} size={5} color="#3b82f6" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>League Information</Heading>
|
|
<Text size="sm" color="text-gray-400">Basic league details</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Grid cols={2} gap={4}>
|
|
<InfoItem label="Name" value={viewData.league.name} />
|
|
<InfoItem label="Visibility" value={viewData.league.visibility} capitalize />
|
|
<GridItem colSpan={2}>
|
|
<InfoItem label="Description" value={viewData.league.description} />
|
|
</GridItem>
|
|
<InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
|
|
<InfoItem label="Owner ID" value={viewData.league.ownerId} mono />
|
|
</Grid>
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Configuration */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
|
|
<Icon icon={Trophy} size={5} color="#10b981" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>Configuration</Heading>
|
|
<Text size="sm" color="text-gray-400">League rules and limits</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Grid cols={2} gap={4}>
|
|
<ConfigItem icon={Users} label="Max Drivers" value={viewData.config.maxDrivers} />
|
|
<ConfigItem icon={Shield} label="Require Approval" value={viewData.config.requireApproval ? 'Yes' : 'No'} />
|
|
<ConfigItem icon={Clock} label="Allow Late Join" value={viewData.config.allowLateJoin ? 'Yes' : 'No'} />
|
|
<ConfigItem icon={Trophy} label="Scoring Preset" value={viewData.config.scoringPresetId} mono />
|
|
</Grid>
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Note about forms */}
|
|
<Card>
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
|
|
<Icon icon={Settings} size={8} color="#f59e0b" />
|
|
</Surface>
|
|
<Box style={{ textAlign: 'center' }}>
|
|
<Heading level={3}>Settings Management</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={2}>
|
|
Form-based editing and ownership transfer functionality will be implemented in future updates.
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function InfoItem({ label, value, capitalize, mono }: { label: string, value: string, capitalize?: boolean, mono?: boolean }) {
|
|
return (
|
|
<Box>
|
|
<Text size="sm" weight="medium" color="text-gray-400" block mb={1}>{label}</Text>
|
|
<Text color="text-white" style={{ textTransform: capitalize ? 'capitalize' : 'none', fontFamily: mono ? 'monospace' : 'inherit' }}>{value}</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function ConfigItem({ icon, label, value, mono }: { icon: React.ElementType, label: string, value: string | number, mono?: boolean }) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Icon icon={icon as any} size={5} color="#9ca3af" />
|
|
<Box>
|
|
<Text size="sm" weight="medium" color="text-gray-400" block>{label}</Text>
|
|
<Text color="text-white" style={{ fontFamily: mono ? 'monospace' : 'inherit' }}>{value}</Text>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|