134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
import { PlaceholderImage } from '@/ui/PlaceholderImage';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
|
|
import { Calendar as LucideCalendar } from 'lucide-react';
|
|
import React, { ReactNode } from 'react';
|
|
|
|
interface LeagueCardProps {
|
|
name: string;
|
|
description?: string;
|
|
coverUrl: string;
|
|
logoUrl?: string;
|
|
badges?: ReactNode;
|
|
championshipBadge?: ReactNode;
|
|
slotLabel: string;
|
|
usedSlots: number;
|
|
maxSlots: number | string;
|
|
fillPercentage: number;
|
|
hasOpenSlots: boolean;
|
|
openSlotsCount: number;
|
|
isTeamLeague?: boolean;
|
|
usedDriverSlots?: number;
|
|
maxDrivers?: number | string;
|
|
timingSummary?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function LeagueCard({
|
|
name,
|
|
description,
|
|
coverUrl,
|
|
logoUrl,
|
|
badges,
|
|
championshipBadge,
|
|
slotLabel,
|
|
usedSlots,
|
|
maxSlots,
|
|
fillPercentage,
|
|
hasOpenSlots,
|
|
openSlotsCount,
|
|
timingSummary,
|
|
onClick,
|
|
}: LeagueCardProps) {
|
|
return (
|
|
<UILeagueCard
|
|
onClick={onClick}
|
|
coverUrl={coverUrl}
|
|
logo={
|
|
<Surface
|
|
width="3rem"
|
|
height="3rem"
|
|
rounded="md"
|
|
overflow="hidden"
|
|
border
|
|
variant="dark"
|
|
>
|
|
{logoUrl ? (
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${name} logo`}
|
|
width={48}
|
|
height={48}
|
|
objectFit="cover"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={48} />
|
|
)}
|
|
</Surface>
|
|
}
|
|
badges={
|
|
<React.Fragment>
|
|
{badges}
|
|
{championshipBadge}
|
|
</React.Fragment>
|
|
}
|
|
>
|
|
<Box marginBottom={1}>
|
|
<Group gap={2}>
|
|
<Box width="0.25rem" height="1rem" bg="var(--ui-color-intent-primary)" />
|
|
<Heading level={3} weight="bold" truncate>{name}</Heading>
|
|
</Group>
|
|
</Box>
|
|
|
|
<Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
|
|
{description || 'No description available'}
|
|
</Text>
|
|
|
|
<LeagueCardStats
|
|
label={slotLabel}
|
|
value={`${usedSlots}/${maxSlots || '∞'}`}
|
|
percentage={fillPercentage}
|
|
intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
|
|
/>
|
|
|
|
{hasOpenSlots && (
|
|
<Box marginBottom={4}>
|
|
<Surface
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={1.5}
|
|
paddingX={2}
|
|
paddingY={1}
|
|
bg="rgba(25, 140, 255, 0.05)"
|
|
border="1px solid rgba(25, 140, 255, 0.2)"
|
|
rounded="sm"
|
|
width="fit-content"
|
|
>
|
|
<Box width="0.375rem" height="0.375rem" rounded="full" bg="var(--ui-color-intent-primary)" />
|
|
<Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
|
|
</Surface>
|
|
</Box>
|
|
)}
|
|
|
|
<LeagueCardFooter>
|
|
{timingSummary && (
|
|
<Group gap={2}>
|
|
<Icon icon={LucideCalendar} size={3} intent="low" />
|
|
<Text size="xs" variant="low" font="mono">
|
|
{timingSummary.split('•')[1]?.trim() || timingSummary}
|
|
</Text>
|
|
</Group>
|
|
)}
|
|
</LeagueCardFooter>
|
|
</UILeagueCard>
|
|
);
|
|
}
|