website refactor

apps/website/ui/LeagueSummaryCard.tsx

@@ -0,0 +1,121 @@
+
+
+import { ArrowRight } from 'lucide-react';
+import { Box } from './Box';
+import { Button } from './Button';
+import { Card } from './Card';
+import { Grid } from './Grid';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Image } from './Image';
+import { Link } from './Link';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
+import { Text } from './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}>
+          <Box
+            w="14"
+            h="14"
+            rounded="lg"
+            overflow="hidden"
+            bg="bg-deep-graphite"
+            flexShrink={0}
+          >
+            <Image
+              src={`/media/league-logo/${id}`}
+              alt={name}
+              width={56}
+              height={56}
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            />
+          </Box>
+          <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>
+  );
+}