website refactor

apps/website/components/leagues/LeagueCard.tsx

@@ -1,23 +1,32 @@
-'use client';
 
-import React from 'react';
+
+import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
-import { Trophy, Users, Calendar, ChevronRight } from 'lucide-react';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight } 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';
+  badges?: ReactNode;
+  championshipBadge?: ReactNode;
+  slotLabel: string;
+  usedSlots: number;
+  maxSlots: number | string;
+  fillPercentage: number;
+  hasOpenSlots: boolean;
+  openSlotsCount: number;
+  isTeamLeague?: boolean;
+  usedDriverSlots?: number;
+  maxDrivers?: number | string;
+  timingSummary?: string;
   onClick?: () => void;
 }
 
@@ -26,154 +35,154 @@ export function LeagueCard({
   description,
   coverUrl,
   logoUrl,
-  gameName,
-  memberCount,
-  maxMembers,
-  nextRaceDate,
-  championshipType,
+  badges,
+  championshipBadge,
+  slotLabel,
+  usedSlots,
+  maxSlots,
+  fillPercentage,
+  hasOpenSlots,
+  openSlotsCount,
+  isTeamLeague: _isTeamLeague,
+  usedDriverSlots: _usedDriverSlots,
+  maxDrivers: _maxDrivers,
+  timingSummary,
   onClick,
 }: LeagueCardProps) {
-  const fillPercentage = maxMembers ? (memberCount / maxMembers) * 100 : 0;
-
   return (
-    <Box 
-      as="article"
-      onClick={onClick}
+    <Box
       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
+      cursor={onClick ? 'pointer' : 'default'}
+      h="full"
+      onClick={onClick}
+      className="group"
     >
-      {/* Cover Image */}
-      <Box position="relative" h="32" overflow="hidden">
-        <Box fullWidth fullHeight opacity={0.6}>
+      {/* Card Container */}
+      <Box 
+        position="relative" 
+        h="full" 
+        rounded="none" 
+        bg="panel-gray/40" 
+        border 
+        borderColor="border-gray/50" 
+        overflow="hidden" 
+        transition 
+        className="hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300"
+      >
+        {/* Cover Image */}
+        <Box position="relative" h="32" overflow="hidden">
           <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"
+            className="transition-transform duration-500 group-hover:scale-105 opacity-60"
           />
-        </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>
+          {/* Gradient Overlay */}
+          <Box position="absolute" inset="0" bg="linear-gradient(to top, #0C0D0F, transparent)" />
+          
+          {/* Badges - Top Left */}
+          <Box position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
+            {badges}
           </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>
+          {/* Championship Type Badge - Top Right */}
+          <Box position="absolute" top="3" right="3">
+            {championshipBadge}
+          </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} />
+          {/* Logo */}
+          <Box position="absolute" left="4" bottom="-6" zIndex={10}>
+            <Box w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
+              {logoUrl ? (
+                <Image
+                  src={logoUrl}
+                  alt={`${name} logo`}
+                  width={48}
+                  height={48}
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
+                />
+              ) : (
+                <PlaceholderImage size={48} />
+              )}
             </Box>
-          )}
+          </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">
+        {/* Content */}
+        <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
+          {/* Title & Description */}
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Box w="1" h="4" bg="primary-accent" />
+            <Heading level={3} fontSize="lg" weight="bold" className="line-clamp-1 group-hover:text-primary-accent transition-colors tracking-tight">
+              {name}
+            </Heading>
+          </Stack>
+          <Text size="xs" color="text-gray-500" lineClamp={2} mb={4} style={{ height: '2.5rem' }} block leading="relaxed">
             {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)}%`}
-              />
+          {/* Stats Row */}
+          <Box display="flex" alignItems="center" gap={3} mb={4}>
+            {/* Primary Slots (Drivers/Teams/Nations) */}
+            <Box flexGrow={1}>
+              <Box display="flex" alignItems="center" justifyContent="between" mb={1.5}>
+                <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">{slotLabel}</Text>
+                <Text size="xs" color="text-gray-400" font="mono">
+                  {usedSlots}/{maxSlots || '∞'}
+                </Text>
+              </Box>
+              <Box h="1" rounded="none" bg="border-gray/30" overflow="hidden">
+                <Box
+                  h="full"
+                  rounded="none"
+                  transition
+                  bg={
+                    fillPercentage >= 90
+                      ? 'warning-amber'
+                      : fillPercentage >= 70
+                      ? 'primary-accent'
+                      : 'success-green'
+                  }
+                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
+                />
+              </Box>
             </Box>
+
+            {/* Open Slots Badge */}
+            {hasOpenSlots && (
+              <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} rounded="none" bg="primary-accent/5" border borderColor="primary-accent/20">
+                <Box w="1.5" h="1.5" rounded="full" bg="primary-accent" className="animate-pulse" />
+                <Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-tighter">
+                  {openSlotsCount} OPEN
+                </Text>
+              </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>
+          {/* Spacer to push footer to bottom */}
+          <Box flexGrow={1} />
+
+          {/* Footer Info */}
+          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-gray/30" mt="auto">
+            <Box display="flex" alignItems="center" gap={3}>
+              {timingSummary && (
+                <Box display="flex" alignItems="center" gap={2}>
+                  <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
+                  <Text size="xs" color="text-gray-500" font="mono">
+                    {timingSummary.split('•')[1]?.trim() || timingSummary}
+                  </Text>
+                </Box>
+              )}
             </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>
+            
+            {/* View Arrow */}
+            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-accent transition-colors">
+              <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">VIEW</Text>
+              <Icon icon={LucideChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
             </Box>
           </Box>
         </Box>
@@ -181,3 +190,4 @@ export function LeagueCard({
     </Box>
   );
 }
+