122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
|
|
|
|
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>
|
|
);
|
|
}
|