website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/components/leagues/LeagueSlider.tsx
+++ b/apps/website/components/leagues/LeagueSlider.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useCallback, useRef, useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
+import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
+import { LeagueSummaryViewModelBuilder } from '@/lib/builders/view-models/LeagueSummaryViewModelBuilder';
+import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
+import { routes } from '@/lib/routing/RouteConfig';
+
+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 (
+    <Box mb={10}>
+      {/* Section header */}
+      <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box 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} />
+          </Box>
+          <Box>
+            <Heading level={2}>{title}</Heading>
+            <Text size="xs" color="text-gray-500">{description}</Text>
+          </Box>
+          <Box 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}
+          </Box>
+        </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>
+      </Box>
+
+      {/* Scrollable container with fade edges */}
+      <Box position="relative">
+        <Box 
+          position="absolute" 
+          top={0} 
+          bottom={4} 
+          left={0} 
+          w="3rem" 
+          bg="bg-gradient-to-r from-deep-graphite to-transparent" 
+          zIndex={10} 
+          pointerEvents="none" 
+        />
+        <Box 
+          position="absolute" 
+          top={0} 
+          bottom={4} 
+          right={0} 
+          w="3rem" 
+          bg="bg-gradient-to-l from-deep-graphite to-transparent" 
+          zIndex={10} 
+          pointerEvents="none" 
+        />
+        
+        <Box
+          ref={scrollRef}
+          onScroll={checkScrollButtons}
+          display="flex"
+          gap={4}
+          overflow="auto"
+          pb={4}
+          px={4}
+          hideScrollbar
+        >
+          {leagues.map((league) => {
+            const viewModel = LeagueSummaryViewModelBuilder.build(league);
+            
+            return (
+              <Box key={league.id} flexShrink={0} w="320px">
+                <Link href={routes.league.detail(league.id)} block>
+                  <LeagueCard league={viewModel} />
+                </Link>
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+}