wip

apps/website/components/teams/TeamRankingsTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Medal, Users, Globe, Languages } from 'lucide-react';
+import { Medal, Users } from 'lucide-react';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -32,66 +32,56 @@ interface TeamRankingsTableProps {
 
 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' }}>
+    <Surface variant="muted" rounded="xl" border className="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 display="grid" className="grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-[10px] font-medium text-gray-500 uppercase tracking-wider">
+        <Box className="col-span-1 text-center">Rank</Box>
+        <Box className="col-span-5">Team</Box>
+        <Box className="col-span-2 text-center hidden lg:block">Members</Box>
+        <Box className="col-span-2 text-center">Rating</Box>
+        <Box className="col-span-2 text-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'
-              }}
+              display="grid"
+              className={`grid-cols-12 gap-4 p-4 w-full text-left bg-transparent border-0 cursor-pointer hover:bg-iron-gray/20 transition-colors ${
+                index < teams.length - 1 ? 'border-b border-charcoal-outline/50' : ''
+              }`}
             >
               {/* 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 className="col-span-1 flex items-center justify-center">
+                <Box width={9} height={9} rounded="full" display="flex" center backgroundColor="charcoal-outline">
+                  {index < 3 ? <Icon icon={Medal} size={4} color={index === 0 ? 'text-yellow-400' : index === 1 ? 'text-gray-300' : 'text-amber-600'} /> : <Text size="xs" color="text-gray-400">{index + 1}</Text>}
+                </Box>
               </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' }}>
+              <Box className="col-span-5 flex items-center gap-3">
+                <Box width={10} height={10} rounded="lg" className="overflow-hidden" border borderColor="charcoal-outline">
                   <Image
                     src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                     alt={team.name}
                     width={40}
                     height={40}
-                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    className="w-full h-full object-cover"
                   />
                 </Box>
-                <Box style={{ minWidth: 0, flex: 1 }}>
-                  <Text weight="semibold" color="text-white" block truncate>{team.name}</Text>
+                <Box className="min-w-0 flex-1">
+                  <Text weight="semibold" color="text-white" block className="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>
+                        <Box width={1.5} height={1.5} rounded="full" backgroundColor="primary-blue" opacity={0.5} />
+                        <Text size="xs" color="text-primary-blue">{team.category}</Text>
                       </Stack>
                     )}
                   </Stack>
@@ -99,22 +89,22 @@ export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTa
               </Box>
 
               {/* Members */}
-              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }} className="hidden lg:flex">
+              <Box className="col-span-2 flex items-center justify-center hidden lg:flex">
                 <Stack direction="row" align="center" gap={1.5}>
-                  <Icon icon={Users} size={3.5} color="#9ca3af" />
+                  <Icon icon={Users} size={3.5} color="text-gray-500" />
                   <Text size="sm" color="text-gray-400">{team.memberCount}</Text>
                 </Stack>
               </Box>
 
               {/* Rating */}
-              <Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Box className="col-span-2 flex items-center justify-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' }}>
+              <Box className="col-span-2 flex items-center justify-center">
                 <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
                   {team.totalWins}
                 </Text>
@@ -123,6 +113,6 @@ export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTa
           );
         })}
       </Stack>
-    </Box>
+    </Surface>
   );
 }