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-19 18:01:30 +01:00
parent 6154d54435
commit 61b5cf3b64
120 changed files with 2226 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/website/templates/LeagueSettingsTemplate.tsx
View File

@@ -23,19 +23,19 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
<Surface variant="dark" border rounded="lg" padding={6}>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Box p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
<Icon icon={Settings} size={5} color="text-primary-blue" />
<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="text-primary-blue">LEAGUE INFORMATION</Heading>
<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 cols={1} mdCols={2} gap={6}>
<Grid responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
<InfoItem label="Name" value={viewData.league.name} />
<InfoItem label="Visibility" value={viewData.league.visibility} capitalize />
<GridItem colSpan={2}>
<GridItem responsiveColSpan={{ base: 1, md: 2 }}>
<InfoItem label="Description" value={viewData.league.description} />
</GridItem>
<InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
@@ -48,16 +48,16 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
<Surface variant="dark" border rounded="lg" padding={6}>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Box p={2} bg="bg-performance-green/10" rounded="md" border borderColor="border-performance-green/20">
<Icon icon={Trophy} size={5} color="text-performance-green" />
<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-performance-green">CONFIGURATION</Heading>
<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 cols={1} mdCols={2} gap={6}>
<Grid responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
<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'} />
@@ -69,12 +69,12 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
{/* Note about forms */}
<Surface variant="dark" border rounded="lg" padding={8}>
<Stack align="center" gap={4}>
<Box p={4} bg="bg-warning-amber/10" rounded="full" border borderColor="border-warning-amber/20">
<Icon icon={Settings} size={8} color="text-warning-amber" />
<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} display="block">
<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>
@@ -88,8 +88,8 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
function InfoItem({ label, value, capitalize }: { label: string, value: string, capitalize?: boolean }) {
return (
<Box>
<Text size="xs" weight="bold" color="text-gray-500" display="block" mb={1} letterSpacing="wider">{label.toUpperCase()}</Text>
<Text color="text-white" weight="medium">{capitalize ? value.toUpperCase() : value}</Text>
<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>
);
}
@@ -97,12 +97,12 @@ function InfoItem({ label, value, capitalize }: { label: string, value: string,
function ConfigItem({ icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
return (
<Stack direction="row" align="center" gap={4}>
<Box center w={10} h={10} rounded="lg" bg="bg-white/5">
<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" display="block" letterSpacing="wider">{label.toUpperCase()}</Text>
<Text color="text-white" weight="medium">{value}</Text>
<Text size="xs" weight="bold" color="text-gray-500" block letterSpacing="wider">{label.toUpperCase()}</Text>
<Text color="white" weight="medium">{value}</Text>
</Box>
</Stack>
);