147 lines
4.5 KiB
TypeScript
147 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
|
|
import { LeagueSummaryViewModelBuilder } from '@/lib/builders/view-models/LeagueSummaryViewModelBuilder';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
|
|
import { useCallback, useRef, useState } from 'react';
|
|
|
|
interface LeagueSliderProps {
|
|
title: string;
|
|
icon: LucideIcon;
|
|
description: string;
|
|
leagues: LeaguesViewData['leagues'];
|
|
autoScroll?: boolean;
|
|
iconColor?: string;
|
|
scrollSpeedMultiplier?: number;
|
|
scrollDirection?: 'left' | 'right';
|
|
}
|
|
|
|
export function LeagueSlider({
|
|
title,
|
|
icon: IconComp,
|
|
description,
|
|
leagues,
|
|
iconColor = 'text-primary-blue',
|
|
}: LeagueSliderProps) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
const [canScrollRight, setCanScrollRight] = useState(true);
|
|
|
|
const checkScrollButtons = useCallback(() => {
|
|
if (scrollRef.current) {
|
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
setCanScrollLeft(scrollLeft > 0);
|
|
setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
|
|
}
|
|
}, []);
|
|
|
|
const scroll = useCallback((direction: 'left' | 'right') => {
|
|
if (scrollRef.current) {
|
|
const cardWidth = 340;
|
|
const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
|
|
scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
}
|
|
}, []);
|
|
|
|
if (leagues.length === 0) return null;
|
|
|
|
return (
|
|
<Stack mb={10}>
|
|
{/* Section header */}
|
|
<Stack display="flex" alignItems="center" justifyContent="between" mb={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack display="flex" h={10} w={10} alignItems="center" justifyContent="center" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline">
|
|
<Icon icon={IconComp} size={5} color={iconColor} />
|
|
</Stack>
|
|
<Stack>
|
|
<Heading level={2}>{title}</Heading>
|
|
<Text size="xs" color="text-gray-500">{description}</Text>
|
|
</Stack>
|
|
<Stack as="span" ml={2} px={2} py={0.5} rounded="full" fontSize="0.75rem" bg="bg-charcoal-outline/50" color="text-gray-400">
|
|
{leagues.length}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Navigation arrows */}
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => scroll('left')}
|
|
disabled={!canScrollLeft}
|
|
size="sm"
|
|
w="2rem"
|
|
h="2rem"
|
|
>
|
|
<Icon icon={ChevronLeft} size={4} />
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => scroll('right')}
|
|
disabled={!canScrollRight}
|
|
size="sm"
|
|
w="2rem"
|
|
h="2rem"
|
|
>
|
|
<Icon icon={ChevronRight} size={4} />
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Scrollable container with fade edges */}
|
|
<Stack position="relative">
|
|
<Stack
|
|
position="absolute"
|
|
top={0}
|
|
bottom={4}
|
|
left={0}
|
|
w="3rem"
|
|
bg="bg-gradient-to-r from-deep-graphite to-transparent"
|
|
zIndex={10}
|
|
pointerEvents="none"
|
|
/>
|
|
<Stack
|
|
position="absolute"
|
|
top={0}
|
|
bottom={4}
|
|
right={0}
|
|
w="3rem"
|
|
bg="bg-gradient-to-l from-deep-graphite to-transparent"
|
|
zIndex={10}
|
|
pointerEvents="none"
|
|
/>
|
|
|
|
<Stack
|
|
ref={scrollRef}
|
|
onScroll={checkScrollButtons}
|
|
display="flex"
|
|
gap={4}
|
|
overflow="auto"
|
|
pb={4}
|
|
px={4}
|
|
hideScrollbar
|
|
>
|
|
{leagues.map((league) => {
|
|
const viewModel = LeagueSummaryViewModelBuilder.build(league);
|
|
|
|
return (
|
|
<Stack key={league.id} flexShrink={0} w="320px">
|
|
<Link href={routes.league.detail(league.id)} block>
|
|
<LeagueCard league={viewModel} />
|
|
</Link>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|