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

145
apps/website/templates/TeamLeaderboardTemplate.tsx
View File

@@ -1,18 +1,16 @@
'use client';
import React from 'react';
import { Award, ArrowLeft } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Award, ChevronLeft } from 'lucide-react';
import { Container } from '@/ui/Container';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Container } from '@/ui/Container';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { ModalIcon } from '@/ui/ModalIcon';
import { TeamPodium } from '@/components/teams/TeamPodium';
import { TeamFilter } from '@/ui/TeamFilter';
import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
interface TeamLeaderboardTemplateProps {
@@ -27,64 +25,93 @@ interface TeamLeaderboardTemplateProps {
export function TeamLeaderboardTemplate({
viewData,
onSearchChange,
filterLevelChange,
onSortChange,
onTeamClick,
onBackToTeams,
}: TeamLeaderboardTemplateProps) {
const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;
const { searchQuery, filteredAndSortedTeams } = viewData;
return (
<Container size="lg" py={8}>
<Stack gap={8}>
{/* Header */}
<Box>
<Box mb={6}>
<Button
variant="secondary"
onClick={onBackToTeams}
icon={<Icon icon={ArrowLeft} size={4} />}
>
Back to Teams
</Button>
</Box>
<Stack direction="row" align="center" gap={4}>
<ModalIcon
icon={Award}
color="text-yellow-400"
bgColor="bg-yellow-400/10"
borderColor="border-yellow-400/30"
/>
<Box>
<Heading level={1}>Team Leaderboard</Heading>
<Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
</Box>
<Box bg="base-black" minH="screen">
<Container size="lg" py={12}>
<Stack gap={8}>
{/* Header */}
<Stack direction="row" align="center" justify="between">
<Stack direction="row" align="center" gap={4}>
<Button variant="secondary" size="sm" onClick={onBackToTeams} icon={<Icon icon={ChevronLeft} size={4} />}>
Back
</Button>
<Box>
<Heading level={1} weight="bold">Global Standings</Heading>
<Text color="text-gray-500" size="sm" font="mono" uppercase letterSpacing="widest">Team Performance Index</Text>
</Box>
</Stack>
<Icon icon={Award} size={8} color="warning-amber" />
</Stack>
</Box>
{/* Filters and Search */}
<TeamFilter
searchQuery={searchQuery}
onSearchChange={onSearchChange}
filterLevel={filterLevel}
onFilterLevelChange={filterLevelChange}
sortBy={sortBy}
onSortChange={onSortChange}
/>
<LeaderboardFiltersBar
searchQuery={searchQuery}
onSearchChange={onSearchChange}
placeholder="Search teams..."
/>
{/* Podium for Top 3 */}
{sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
<TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
)}
{/* Leaderboard Table */}
<TeamRankingsTable
teams={filteredAndSortedTeams}
sortBy={sortBy}
onTeamClick={onTeamClick}
/>
</Stack>
</Container>
<Box border borderColor="outline-steel" bg="surface-charcoal/30">
<Table>
<TableHead>
<TableRow>
<TableHeader w="20">Rank</TableHeader>
<TableHeader>Team</TableHeader>
<TableHeader textAlign="center">Personnel</TableHeader>
<TableHeader textAlign="center">Races</TableHeader>
<TableHeader textAlign="right">Rating</TableHeader>
</TableRow>
</TableHead>
<TableBody>
{filteredAndSortedTeams.length > 0 ? (
filteredAndSortedTeams.map((team, index) => (
<TableRow
key={team.id}
onClick={() => onTeamClick(team.id)}
cursor="pointer"
hoverBg="surface-charcoal/50"
>
<TableCell>
<Text font="mono" weight="bold" color={index < 3 ? 'warning-amber' : 'text-gray-500'}>
#{index + 1}
</Text>
</TableCell>
<TableCell>
<Stack direction="row" align="center" gap={3}>
<Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
<Text size="xs" weight="bold" color="primary-accent">{team.name.substring(0, 2).toUpperCase()}</Text>
</Box>
<Text weight="bold" size="sm" color="text-white">{team.name}</Text>
</Stack>
</TableCell>
<TableCell textAlign="center">
<Text size="xs" color="text-gray-400" font="mono">{team.memberCount}</Text>
</TableCell>
<TableCell textAlign="center">
<Text size="xs" color="text-gray-400" font="mono">{team.totalRaces}</Text>
</TableCell>
<TableCell textAlign="right">
<Text font="mono" weight="bold" color="primary-accent">1450</Text>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={5} textAlign="center" py={12}>
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
No teams found matching criteria
</Text>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</Box>
</Stack>
</Container>
</Box>
);
}