website refactor

2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
--- a/apps/website/components/teams/TeamRankingsTable.tsx
+++ b/apps/website/components/teams/TeamRankingsTable.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import React from 'react';
+import { Medal, Users, Globe, Languages } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+interface Team {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  performanceLevel: string;
+  category?: string;
+  region?: string;
+  languages?: string[];
+  isRecruiting?: boolean;
+  memberCount: number;
+  totalWins: number;
+  totalRaces: number;
+}
+
+interface TeamRankingsTableProps {
+  teams: Team[];
+  sortBy: string;
+  onTeamClick: (id: string) => void;
+}
+
+export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
+  return (
+    <Box style={{ borderRadius: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', border: '1px solid #262626', overflow: 'hidden' }}>
+      {/* Table Header */}
+      <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', gap: '1rem', padding: '0.75rem 1rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626', fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        <Box style={{ gridColumn: 'span 1', textAlign: 'center' }}>Rank</Box>
+        <Box style={{ gridColumn: 'span 5' }}>Team</Box>
+        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }} className="hidden lg:block">Members</Box>
+        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Rating</Box>
+        <Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Wins</Box>
+      </Box>
+
+      {/* Table Body */}
+      <Stack gap={0}>
+        {teams.map((team, index) => {
+          const winRate = team.totalRaces > 0 ? ((team.totalWins / team.totalRaces) * 100).toFixed(1) : '0.0';
+
+          return (
+            <Box
+              key={team.id}
+              as="button"
+              type="button"
+              onClick={() => onTeamClick(team.id)}
+              style={{ 
+                display: 'grid', 
+                gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', 
+                gap: '1rem', 
+                padding: '1rem', 
+                width: '100%', 
+                textAlign: 'left', 
+                backgroundColor: 'transparent', 
+                border: 'none', 
+                cursor: 'pointer',
+                borderBottom: index < teams.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
+              }}
+            >
+              {/* Position */}
+              <Box style={{ gridColumn: 'span 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Surface variant="muted" rounded="full" padding={1} style={{ width: '2.25rem', height: '2.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#262626' }}>
+                  {index < 3 ? <Icon icon={Medal} size={4} /> : index + 1}
+                </Surface>
+              </Box>
+
+              {/* Team Info */}
+              <Box style={{ gridColumn: 'span 5', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid #262626' }}>
+                  <Image
+                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                    alt={team.name}
+                    width={40}
+                    height={40}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                </Box>
+                <Box style={{ minWidth: 0, flex: 1 }}>
+                  <Text weight="semibold" color="text-white" block truncate>{team.name}</Text>
+                  <Stack direction="row" align="center" gap={2} mt={1} wrap>
+                    <Text size="xs" color="text-gray-500">{team.performanceLevel}</Text>
+                    {team.category && (
+                      <Stack direction="row" align="center" gap={1}>
+                        <Box style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
+                        <Text size="xs" color="text-purple-400">{team.category}</Text>
+                      </Stack>
+                    )}
+                  </Stack>
+                </Box>
+              </Box>
+
+              {/* Members */}
+              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }} className="hidden lg:flex">
+                <Stack direction="row" align="center" gap={1.5}>
+                  <Icon icon={Users} size={3.5} color="#9ca3af" />
+                  <Text size="sm" color="text-gray-400">{team.memberCount}</Text>
+                </Stack>
+              </Box>
+
+              {/* Rating */}
+              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
+                  0
+                </Text>
+              </Box>
+
+              {/* Wins */}
+              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
+                  {team.totalWins}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}