mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/website/components/leagues/LeagueSlider.tsx
View File

@@ -1,7 +1,6 @@
'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';
@@ -55,20 +54,20 @@ export function LeagueSlider({
if (leagues.length === 0) return null;
return (
<Box mb={10}>
<Stack mb={10}>
{/* Section header */}
<Box display="flex" alignItems="center" justifyContent="between" mb={4}>
<Stack 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">
<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} />
</Box>
<Box>
</Stack>
<Stack>
<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">
</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}
</Box>
</Stack>
</Stack>
{/* Navigation arrows */}
@@ -94,11 +93,11 @@ export function LeagueSlider({
<Icon icon={ChevronRight} size={4} />
</Button>
</Stack>
</Box>
</Stack>
{/* Scrollable container with fade edges */}
<Box position="relative">
<Box
<Stack position="relative">
<Stack
position="absolute"
top={0}
bottom={4}
@@ -108,7 +107,7 @@ export function LeagueSlider({
zIndex={10}
pointerEvents="none"
/>
<Box
<Stack
position="absolute"
top={0}
bottom={4}
@@ -119,7 +118,7 @@ export function LeagueSlider({
pointerEvents="none"
/>
<Box
<Stack
ref={scrollRef}
onScroll={checkScrollButtons}
display="flex"
@@ -133,15 +132,15 @@ export function LeagueSlider({
const viewModel = LeagueSummaryViewModelBuilder.build(league);
return (
<Box key={league.id} flexShrink={0} w="320px">
<Stack key={league.id} flexShrink={0} w="320px">
<Link href={routes.league.detail(league.id)} block>
<LeagueCard league={viewModel} />
</Link>
</Box>
</Stack>
);
})}
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
);
}