71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|