website refactor

apps/website/components/leagues/AvailableLeagueCard.tsx

@@ -6,7 +6,8 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
 import { CheckCircle2, Clock, Star } from 'lucide-react';
 
@@ -39,9 +40,9 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   };
 
   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' },
+    active: { intent: 'success' as const, label: 'Active Season' },
+    upcoming: { intent: 'warning' as const, label: 'Starting Soon' },
+    completed: { intent: 'default' as const, label: 'Season Ended' },
   };
 
   const config = tierConfig[league.tier];
@@ -51,41 +52,38 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
     <Card>
       <Stack gap={4}>
         {/* Header */}
-        <Stack direction="row" align="start" justify="between">
-          <Stack flexGrow={1}>
-            <Stack direction="row" align="center" gap={2} mb={1} wrap>
+        <Stack align="start" justify="between">
+          <Stack>
+            <Stack gap={2}>
               <Badge variant="primary">{config.icon} {config.label}</Badge>
-              <Stack px={2} py={0.5} rounded="full" className={status.bgColor}>
-                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
-              </Stack>
+              <Badge variant={status.intent}>{status.label}</Badge>
             </Stack>
             <Heading level={3}>{league.name}</Heading>
-            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
+            <Text size="sm" variant="low">{league.game}</Text>
           </Stack>
-          <Stack 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>
+          <Badge variant="default">
+            <Stack align="center" gap={1}>
+              <Icon icon={Star} size={3.5} intent="warning" />
+              <Text size="sm" weight="medium" variant="high">{league.rating}</Text>
             </Stack>
-          </Stack>
+          </Badge>
         </Stack>
 
         {/* Description */}
-        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
+        <Text size="sm" variant="low">{league.description}</Text>
 
         {/* Stats Grid */}
-        <Stack display="grid" gridCols={3} gap={2}>
+        <Grid cols={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" />
-        </Stack>
+          <StatItem label="CPM" value={league.formattedCpm} intent="success" />
+        </Grid>
 
         {/* 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 align="center" gap={2}>
+            <Icon icon={Clock} size={4} intent="low" />
+            <Text size="sm" variant="low">Next: {league.nextRace}</Text>
           </Stack>
         )}
 
@@ -104,22 +102,18 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
         </Stack>
 
         {/* Actions */}
-        <Stack direction="row" gap={2}>
-          <Stack flexGrow={1}>
-            <Link href={`/sponsor/leagues/${league.id}`} block>
-              <Button variant="secondary" fullWidth size="sm">
-                View Details
+        <Stack gap={2}>
+          <Link href={`/sponsor/leagues/${league.id}`}>
+            <Button variant="secondary" fullWidth size="sm">
+              View Details
+            </Button>
+          </Link>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Link href={`/sponsor/leagues/${league.id}?action=sponsor`}>
+              <Button variant="primary" fullWidth size="sm">
+                Sponsor
               </Button>
             </Link>
-          </Stack>
-          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
-            <Stack flexGrow={1}>
-              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
-                <Button variant="primary" fullWidth size="sm">
-                  Sponsor
-                </Button>
-              </Link>
-            </Stack>
           )}
         </Stack>
       </Stack>
@@ -127,34 +121,36 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   );
 }
 
-function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+function StatItem({ label, value, intent = 'high' }: { label: string, value: string | number, intent?: 'high' | 'success' }) {
   return (
-    <Stack 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>
-    </Stack>
+    <Card variant="dark">
+      <Stack align="center">
+        <Text weight="bold" variant={intent}>{value}</Text>
+        <Text size="xs" variant="low" uppercase>{label}</Text>
+      </Stack>
+    </Card>
   );
 }
 
 function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
   return (
-    <Stack p={2} rounded="lg" bg="bg-iron-gray/30">
-      <Stack direction="row" align="center" justify="between">
-        <Stack direction="row" align="center" gap={2}>
-          <Stack 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>
+    <Card variant="dark">
+      <Stack align="center" justify="between">
+        <Stack align="center" gap={2}>
+          <Icon icon={CheckCircle2} size={3} intent={available ? 'success' : 'critical'} />
+          <Text size="sm" variant="low">{label}</Text>
         </Stack>
         <Stack>
           {available ? (
-            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
+            <Text size="sm" weight="semibold" variant="high">{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 align="center" gap={1}>
+              <Icon icon={CheckCircle2} size={3} intent="low" />
+              <Text size="sm" variant="low">Filled</Text>
             </Stack>
           )}
         </Stack>
       </Stack>
-    </Stack>
+    </Card>
   );
 }