107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
|
|
|
|
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>
|
|
);
|
|
}
|