website refactor

apps/website/components/leagues/AvailableLeagueCard.tsx

@@ -0,0 +1,161 @@
+
+
+import { CheckCircle2, Clock, Star } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface AvailableLeague {
+  id: string;
+  name: string;
+  game: string;
+  drivers: number;
+  avgViewsPerRace: number;
+  mainSponsorSlot: { available: boolean; price: number };
+  secondarySlots: { available: number; total: number; price: number };
+  rating: number;
+  tier: 'premium' | 'standard' | 'starter';
+  nextRace?: string;
+  seasonStatus: 'active' | 'upcoming' | 'completed';
+  description: string;
+  formattedAvgViews: string;
+  formattedCpm: string;
+}
+
+interface AvailableLeagueCardProps {
+  league: AvailableLeague;
+}
+
+export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
+  const tierConfig = {
+    premium: { icon: '⭐', label: 'Premium' },
+    standard: { icon: '🏆', label: 'Standard' },
+    starter: { icon: '🚀', label: 'Starter' },
+  };
+
+  const statusConfig = {
+    active: { color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active Season' },
+    upcoming: { color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Starting Soon' },
+    completed: { color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Season Ended' },
+  };
+
+  const config = tierConfig[league.tier];
+  const status = statusConfig[league.seasonStatus];
+
+  return (
+    <Card>
+      <Stack gap={4}>
+        {/* Header */}
+        <Stack direction="row" align="start" justify="between">
+          <Box flexGrow={1}>
+            <Stack direction="row" align="center" gap={2} mb={1} wrap>
+              <Badge variant="primary">{config.icon} {config.label}</Badge>
+              <Box px={2} py={0.5} rounded="full" className={status.bgColor}>
+                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
+              </Box>
+            </Stack>
+            <Heading level={3}>{league.name}</Heading>
+            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
+          </Box>
+          <Box px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={Star} size={3.5} color="text-yellow-400" />
+              <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
+            </Stack>
+          </Box>
+        </Stack>
+
+        {/* Description */}
+        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
+
+        {/* Stats Grid */}
+        <Box display="grid" gridCols={3} gap={2}>
+          <StatItem label="Drivers" value={league.drivers} />
+          <StatItem label="Avg Views" value={league.formattedAvgViews} />
+          <StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
+        </Box>
+
+        {/* Next Race */}
+        {league.nextRace && (
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Clock} size={4} color="text-gray-400" />
+            <Text size="sm" color="text-gray-400">Next:</Text>
+            <Text size="sm" color="text-white">{league.nextRace}</Text>
+          </Stack>
+        )}
+
+        {/* Sponsorship Slots */}
+        <Stack gap={2}>
+          <SlotRow 
+            label="Main Sponsor" 
+            available={league.mainSponsorSlot.available} 
+            price={`$${league.mainSponsorSlot.price}/season`} 
+          />
+          <SlotRow 
+            label="Secondary Slots" 
+            available={league.secondarySlots.available > 0} 
+            price={`${league.secondarySlots.available}/${league.secondarySlots.total} @ $${league.secondarySlots.price}`} 
+          />
+        </Stack>
+
+        {/* Actions */}
+        <Stack direction="row" gap={2}>
+          <Box flexGrow={1}>
+            <Link href={`/sponsor/leagues/${league.id}`} block>
+              <Button variant="secondary" fullWidth size="sm">
+                View Details
+              </Button>
+            </Link>
+          </Box>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Box flexGrow={1}>
+              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
+                <Button variant="primary" fullWidth size="sm">
+                  Sponsor
+                </Button>
+              </Link>
+            </Box>
+          )}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
+
+function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+  return (
+    <Box p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
+      <Text weight="bold" className={color}>{value}</Text>
+      <Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
+    </Box>
+  );
+}
+
+function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
+  return (
+    <Box p={2} rounded="lg" bg="bg-iron-gray/30">
+      <Stack direction="row" align="center" justify="between">
+        <Stack direction="row" align="center" gap={2}>
+          <Box width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
+          <Text size="sm" color="text-gray-300">{label}</Text>
+        </Stack>
+        <Box>
+          {available ? (
+            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
+          ) : (
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={CheckCircle2} size={3} color="text-gray-500" />
+              <Text size="sm" color="text-gray-500">Filled</Text>
+            </Stack>
+          )}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}