website refactor

apps/website/ui/LeagueCard.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Users, Clock } from 'lucide-react';
+import { ChevronRight, Users, Clock, Calendar, UserPlus, Heart } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Box } from './Box';
 import { Card } from './Card';
@@ -8,6 +8,8 @@ import { Text } from './Text';
 import { Stack } from './Stack';
 import { Group } from './Group';
 import { Heading } from './Heading';
+import { Button } from './Button';
+import { Badge } from './Badge';
 
 export interface LeagueCardProps {
   name: string;
@@ -23,10 +25,15 @@ export interface LeagueCardProps {
   isTeamLeague: boolean;
   usedDriverSlots?: number;
   maxDrivers?: number;
+  activeDriversCount?: number;
+  nextRaceAt?: string;
   timingSummary?: string;
   onClick?: () => void;
+  onQuickJoin?: (e: React.MouseEvent) => void;
+  onFollow?: (e: React.MouseEvent) => void;
   badges?: ReactNode;
   championshipBadge?: ReactNode;
+  isFeatured?: boolean;
 }
 
 export const LeagueCard = ({ 
@@ -43,10 +50,15 @@ export const LeagueCard = ({
   isTeamLeague,
   usedDriverSlots,
   maxDrivers,
+  activeDriversCount,
+  nextRaceAt,
   timingSummary,
   onClick, 
+  onQuickJoin,
+  onFollow,
   badges,
-  championshipBadge 
+  championshipBadge,
+  isFeatured
 }: LeagueCardProps) => {
   return (
     <Card 
@@ -71,6 +83,9 @@ export const LeagueCard = ({
         />
         <Box position="absolute" top={3} left={3}>
           <Group gap={2}>
+            {isFeatured && (
+              <Badge variant="warning" size="sm" icon={Heart}>FEATURED</Badge>
+            )}
             {badges}
           </Group>
         </Box>
@@ -110,6 +125,25 @@ export const LeagueCard = ({
           </Text>
         )}
 
+        <Stack gap={2}>
+          {nextRaceAt && (
+            <Group gap={2} align="center">
+              <Icon icon={Calendar} size={3} intent="primary" />
+              <Text size="xs" variant="high" weight="bold">
+                Next: {new Date(nextRaceAt).toLocaleDateString()} {new Date(nextRaceAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+              </Text>
+            </Group>
+          )}
+          {activeDriversCount !== undefined && activeDriversCount > 0 && (
+            <Group gap={2} align="center">
+              <Icon icon={Users} size={3} intent="success" />
+              <Text size="xs" variant="success" weight="bold">
+                {activeDriversCount} Active Drivers
+              </Text>
+            </Group>
+          )}
+        </Stack>
+
         <Box flex={1} />
 
         <Stack gap={4}>
@@ -130,6 +164,31 @@ export const LeagueCard = ({
             </Box>
           </Stack>
 
+          <Group gap={2} fullWidth>
+            {onQuickJoin && (
+              <Button 
+                size="xs" 
+                variant="primary" 
+                fullWidth 
+                onClick={(e) => { e.stopPropagation(); onQuickJoin(e); }}
+                icon={<Icon icon={UserPlus} size={3} />}
+              >
+                Join
+              </Button>
+            )}
+            {onFollow && (
+              <Button 
+                size="xs" 
+                variant="secondary" 
+                fullWidth 
+                onClick={(e) => { e.stopPropagation(); onFollow(e); }}
+                icon={<Icon icon={Heart} size={3} />}
+              >
+                Follow
+              </Button>
+            )}
+          </Group>
+
           <Stack direction="row" justify="between" align="center" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
             <Stack direction="row" align="center" gap={1.5}>
               <Icon icon={Clock} size={3} intent="low" />