website refactor

apps/website/components/leagues/LeagueSummaryCard.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { ArrowRight } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/Grid';
+import { Surface } from '@/ui/Surface';
+import { Link } from '@/ui/Link';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+
+interface LeagueSummaryCardProps {
+  league: {
+    id: string;
+    name: string;
+    description?: string;
+    settings: {
+      maxDrivers: number;
+      qualifyingFormat: string;
+    };
+  };
+}
+
+export function LeagueSummaryCard({ league }: LeagueSummaryCardProps) {
+  return (
+    <Card p={0} style={{ overflow: 'hidden' }}>
+      <Box p={4}>
+        <Stack direction="row" align="center" gap={4} mb={4}>
+          <Box style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626', flexShrink: 0 }}>
+            <Image src={`/media/league-logo/${league.id}`} alt={league.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' }}>{league.name}</Heading>
+          </Box>
+        </Stack>
+
+        {league.description && (
+          <Text size="sm" color="text-gray-400" block mb={4} style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{league.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">{league.settings.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' }}>{league.settings.qualifyingFormat}</Text>
+            </Surface>
+          </Grid>
+        </Box>
+
+        <Box>
+          <Link href={`/leagues/${league.id}`} variant="ghost">
+            <Button variant="secondary" fullWidth icon={<Icon icon={ArrowRight} size={4} />}>
+              View League
+            </Button>
+          </Link>
+        </Box>
+      </Box>
+    </Card>
+  );
+}