62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { LeagueCard } from '@/components/leagues/LeagueCard';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Link } from '@/ui/Link';
|
|
|
|
interface League {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
}
|
|
|
|
interface LeagueSummaryPanelProps {
|
|
leagues: League[];
|
|
}
|
|
|
|
/**
|
|
* LeagueSummaryPanel - Semantic section for featured leagues.
|
|
*/
|
|
export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
|
|
return (
|
|
<Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={6}>
|
|
<Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
|
|
FEATURED LEAGUES
|
|
</Heading>
|
|
<Link
|
|
href={routes.public.leagues}
|
|
size="xs"
|
|
weight="bold"
|
|
letterSpacing="widest"
|
|
variant="primary"
|
|
hoverColor="text-white"
|
|
transition
|
|
>
|
|
VIEW ALL →
|
|
</Link>
|
|
</Box>
|
|
|
|
<Box display="flex" flexDirection="col" gap={4}>
|
|
{leagues.slice(0, 2).map((league) => (
|
|
<LeagueCard
|
|
key={league.id}
|
|
name={league.name}
|
|
description={league.description}
|
|
coverUrl="/images/ff1600.jpeg"
|
|
slotLabel="Drivers"
|
|
usedSlots={18}
|
|
maxSlots={24}
|
|
fillPercentage={75}
|
|
hasOpenSlots={true}
|
|
openSlotsCount={6}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|