website refactor

apps/website/components/leagues/LeagueCard.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { Trophy, Users, Calendar, ChevronRight } from 'lucide-react';
+
+interface LeagueCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  coverUrl: string;
+  logoUrl?: string;
+  gameName?: string;
+  memberCount: number;
+  maxMembers?: number;
+  nextRaceDate?: string;
+  championshipType: 'driver' | 'team' | 'nations' | 'trophy';
+  onClick?: () => void;
+}
+
+export function LeagueCard({
+  name,
+  description,
+  coverUrl,
+  logoUrl,
+  gameName,
+  memberCount,
+  maxMembers,
+  nextRaceDate,
+  championshipType,
+  onClick,
+}: LeagueCardProps) {
+  const fillPercentage = maxMembers ? (memberCount / maxMembers) * 100 : 0;
+
+  return (
+    <Box 
+      as="article"
+      onClick={onClick}
+      position="relative"
+      display="flex"
+      flexDirection="col"
+      overflow="hidden"
+      border
+      borderColor="zinc-800"
+      bg="zinc-900/50"
+      hoverBorderColor="blue-500/30"
+      hoverBg="zinc-900"
+      transition
+      cursor="pointer"
+      group
+    >
+      {/* Cover Image */}
+      <Box position="relative" h="32" overflow="hidden">
+        <Box fullWidth fullHeight opacity={0.6}>
+          <Image
+            src={coverUrl}
+            alt={`${name} cover`}
+            fullWidth
+            fullHeight
+            objectFit="cover"
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="transition-transform duration-500 group-hover:scale-105"
+          />
+        </Box>
+        <Box position="absolute" inset="0" bg="linear-gradient(to top, #09090b, transparent)" />
+        
+        {/* Game Badge */}
+        {gameName && (
+          <Box 
+            position="absolute" 
+            top="3" 
+            left="3" 
+            px={2} 
+            py={1} 
+            bg="zinc-900/80" 
+            border 
+            borderColor="white/10" 
+            blur="sm"
+          >
+            <Text weight="bold" color="text-zinc-300" uppercase letterSpacing="0.05em" fontSize="10px">
+              {gameName}
+            </Text>
+          </Box>
+        )}
+
+        {/* Championship Icon */}
+        <Box 
+          position="absolute" 
+          top="3" 
+          right="3" 
+          p={1.5} 
+          bg="zinc-900/80" 
+          color="text-zinc-400" 
+          border 
+          borderColor="white/10" 
+          blur="sm"
+        >
+          {championshipType === 'driver' && <Trophy size={14} />}
+          {championshipType === 'team' && <Users size={14} />}
+        </Box>
+      </Box>
+
+      {/* Content */}
+      <Box position="relative" display="flex" flexDirection="col" flexGrow={1} p={4} pt={6}>
+        {/* Logo */}
+        <Box 
+          position="absolute" 
+          top="-6" 
+          left="4" 
+          w="12" 
+          h="12" 
+          border 
+          borderColor="zinc-800" 
+          bg="zinc-950" 
+          shadow="xl" 
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={`${name} logo`} fullWidth fullHeight objectFit="cover" />
+          ) : (
+            <Box fullWidth fullHeight display="flex" alignItems="center" justifyContent="center" bg="zinc-900" color="text-zinc-700">
+              <Trophy size={20} />
+            </Box>
+          )}
+        </Box>
+
+        <Box display="flex" flexDirection="col" gap={1} mb={4}>
+          <Heading level={3} fontSize="lg" weight="bold" color="text-white" 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="group-hover:text-blue-400 transition-colors truncate"
+          >
+            {name}
+          </Heading>
+          <Text size="xs" color="text-zinc-500" lineClamp={2} leading="relaxed" h="8">
+            {description || 'No description available'}
+          </Text>
+        </Box>
+
+        {/* Stats */}
+        <Box display="flex" flexDirection="col" gap={3} mt="auto">
+          <Box display="flex" flexDirection="col" gap={1.5}>
+            <Box display="flex" justifyContent="between">
+              <Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Drivers</Text>
+              <Text color="text-zinc-400" font="mono" fontSize="10px">{memberCount}/{maxMembers || '∞'}</Text>
+            </Box>
+            <Box h="1" bg="zinc-800" overflow="hidden">
+              <Box 
+                h="full" 
+                transition 
+                bg={fillPercentage > 90 ? 'bg-amber-500' : 'bg-blue-500'}
+                w={`${Math.min(fillPercentage, 100)}%`}
+              />
+            </Box>
+          </Box>
+
+          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="zinc-800/50">
+            <Box display="flex" alignItems="center" gap={2} color="text-zinc-500">
+              <Calendar size={12} />
+              <Text weight="bold" uppercase font="mono" fontSize="10px">
+                {nextRaceDate || 'TBD'}
+              </Text>
+            </Box>
+            <Box display="flex" alignItems="center" gap={1} color="text-zinc-500" 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              className="group-hover:text-blue-400 transition-colors"
+            >
+              <Text weight="bold" uppercase letterSpacing="widest" fontSize="10px">View</Text>
+              <Box 
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                className="transition-transform group-hover:translate-x-0.5"
+              >
+                <ChevronRight size={12} />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}