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-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
apps/website/templates/LeagueOverviewTemplate.tsx Normal file
View File

@@ -0,0 +1,111 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Trophy, Users, Calendar, Shield, type LucideIcon } from 'lucide-react';
interface LeagueOverviewTemplateProps {
viewData: LeagueDetailViewData;
}
export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps) {
return (
<Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
{/* Main Content */}
<Box responsiveColSpan={{ lg: 2 }}>
<Stack gap={8}>
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">About the League</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
<Text color="text-zinc-300" leading="relaxed">
{viewData.description || 'No description provided for this league.'}
</Text>
</Box>
</Stack>
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
<StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
<StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
<StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
<StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
</Box>
</Stack>
</Stack>
</Box>
{/* Sidebar */}
<Box as="aside">
<Stack gap={8}>
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Management</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
<Stack gap={4}>
{viewData.ownerSummary && (
<Box display="flex" alignItems="center" gap={3}>
<Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
<Users size={20} />
</Box>
<Stack gap={0}>
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
<Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
</Stack>
</Box>
)}
<Stack gap={2}>
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
<Box display="flex" flexWrap="wrap" gap={2}>
{viewData.adminSummaries.map(admin => (
<Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
<Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
</Box>
))}
{viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
</Box>
</Stack>
</Stack>
</Box>
</Stack>
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
<Stack gap={4}>
{viewData.sponsors.length > 0 ? (
viewData.sponsors.map(sponsor => (
<Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
<Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
<Trophy size={16} />
</Box>
<Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
</Box>
))
) : (
<Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
)}
</Stack>
</Box>
</Stack>
</Stack>
</Box>
</Box>
);
}
function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
return (
<Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50">
<Box color="text-zinc-600">
<Icon size={16} />
</Box>
<Stack gap={0}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">{label}</Text>
<Text size="lg" weight="bold" color="text-white" font="mono">{value}</Text>
</Stack>
</Box>
);
}