website refactor

apps/website/components/leagues/LeagueSummaryCard.tsx

@@ -0,0 +1,106 @@
+
+
+import { ArrowRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { LeagueLogo } from './LeagueLogo';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface LeagueSummaryCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  maxDrivers: number;
+  qualifyingFormat: string;
+  href: string;
+}
+
+export function LeagueSummaryCard({
+  id,
+  name,
+  description,
+  maxDrivers,
+  qualifyingFormat,
+  href,
+}: LeagueSummaryCardProps) {
+  return (
+    <Card p={0} style={{ overflow: 'hidden' }}>
+      <Box p={4}>
+        <Stack direction="row" align="center" gap={4} mb={4}>
+          <LeagueLogo leagueId={id} alt={name} size={56} />
+          <Box style={{ flex: 1, minWidth: 0 }}>
+            <Text
+              size="xs"
+              color="text-gray-500"
+              style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
+              block
+              mb={0.5}
+            >
+              League
+            </Text>
+            <Heading level={3} style={{ fontSize: '1rem' }}>
+              {name}
+            </Heading>
+          </Box>
+        </Stack>
+
+        {description && (
+          <Text
+            size="sm"
+            color="text-gray-400"
+            block
+            mb={4}
+            lineClamp={2}
+            style={{ height: '2.5rem' }}
+          >
+            {description}
+          </Text>
+        )}
+
+        <Box mb={4}>
+          <Grid cols={2} gap={3}>
+            <Surface variant="dark" rounded="lg" padding={3}>
+              <Text size="xs" color="text-gray-500" block mb={1}>
+                Max Drivers
+              </Text>
+              <Text weight="medium" color="text-white">
+                {maxDrivers}
+              </Text>
+            </Surface>
+            <Surface variant="dark" rounded="lg" padding={3}>
+              <Text size="xs" color="text-gray-500" block mb={1}>
+                Format
+              </Text>
+              <Text
+                weight="medium"
+                color="text-white"
+                style={{ textTransform: 'capitalize' }}
+              >
+                {qualifyingFormat}
+              </Text>
+            </Surface>
+          </Grid>
+        </Box>
+
+        <Box>
+          <Link href={href}>
+            <Button
+              variant="secondary"
+              fullWidth
+              icon={<Icon icon={ArrowRight} size={4} />}
+            >
+              View League
+            </Button>
+          </Link>
+        </Box>
+      </Box>
+    </Card>
+  );
+}