110 lines
3.5 KiB
TypeScript
110 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 { 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={
|
|
<div style={{ width: '3rem', height: '3rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)', backgroundColor: 'var(--ui-color-bg-base)' }}>
|
|
{logoUrl ? (
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${name} logo`}
|
|
width={48}
|
|
height={48}
|
|
objectFit="cover"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={48} />
|
|
)}
|
|
</div>
|
|
}
|
|
badges={
|
|
<React.Fragment>
|
|
{badges}
|
|
{championshipBadge}
|
|
</React.Fragment>
|
|
}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
|
|
<div style={{ width: '0.25rem', height: '1rem', backgroundColor: 'var(--ui-color-intent-primary)' }} />
|
|
<Heading level={3} weight="bold" truncate>{name}</Heading>
|
|
</div>
|
|
|
|
<Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
|
|
{description || 'No description available'}
|
|
</Text>
|
|
|
|
<LeagueCardStats
|
|
label={slotLabel}
|
|
value={`${usedSlots}/${maxSlots || '∞'}`}
|
|
percentage={fillPercentage}
|
|
intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
|
|
/>
|
|
|
|
{hasOpenSlots && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', backgroundColor: 'rgba(25, 140, 255, 0.05)', border: '1px solid rgba(25, 140, 255, 0.2)', borderRadius: 'var(--ui-radius-sm)', width: 'fit-content', marginBottom: '1rem' }}>
|
|
<div style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-intent-primary)' }} />
|
|
<Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
|
|
</div>
|
|
)}
|
|
|
|
<LeagueCardFooter>
|
|
{timingSummary && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
<Icon icon={LucideCalendar} size={3} intent="low" />
|
|
<Text size="xs" variant="low" font="mono">
|
|
{timingSummary.split('•')[1]?.trim() || timingSummary}
|
|
</Text>
|
|
</div>
|
|
)}
|
|
</LeagueCardFooter>
|
|
</UILeagueCard>
|
|
);
|
|
}
|