104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
import { ArrowRight } from 'lucide-react';
|
|
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 { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
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} overflow="hidden">
|
|
<Stack p={4}>
|
|
<Stack direction="row" align="center" gap={4} mb={4}>
|
|
<LeagueLogo leagueId={id} alt={name} size={56} />
|
|
<Stack flex={1} minWidth="0">
|
|
<Text
|
|
size="xs"
|
|
color="text-gray-500"
|
|
transform="uppercase"
|
|
letterSpacing="0.05em"
|
|
block
|
|
mb={0.5}
|
|
>
|
|
League
|
|
</Text>
|
|
<Heading level={3} fontSize="1rem">
|
|
{name}
|
|
</Heading>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{description && (
|
|
<Text
|
|
size="sm"
|
|
color="text-gray-400"
|
|
block
|
|
mb={4}
|
|
lineClamp={2}
|
|
height="2.5rem"
|
|
>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
|
|
<Stack mb={4}>
|
|
<Grid cols={2} gap={3}>
|
|
<Card variant="outline" rounded="lg" p={3} bg="bg-graphite-black">
|
|
<Text size="xs" color="text-gray-500" block mb={1}>
|
|
Max Drivers
|
|
</Text>
|
|
<Text weight="medium" color="text-white">
|
|
{maxDrivers}
|
|
</Text>
|
|
</Card>
|
|
<Card variant="outline" rounded="lg" p={3} bg="bg-graphite-black">
|
|
<Text size="xs" color="text-gray-500" block mb={1}>
|
|
Format
|
|
</Text>
|
|
<Text
|
|
weight="medium"
|
|
color="text-white"
|
|
transform="capitalize"
|
|
>
|
|
{qualifyingFormat}
|
|
</Text>
|
|
</Card>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Link href={href}>
|
|
<Button
|
|
variant="secondary"
|
|
fullWidth
|
|
icon={<Icon icon={ArrowRight} size={4} />}
|
|
>
|
|
View League
|
|
</Button>
|
|
</Link>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|