website refactor

This commit is contained in:
2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions

View File

@@ -1,14 +1,11 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Container } from '@/ui/Container';
import { Surface } from '@/ui/Surface';
import { Box } from '@/ui/Box';
import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
import { LeagueListItem } from '@/ui/LeagueListItem';
import { MembershipPanel } from '@/components/profile/MembershipPanel';
interface ProfileLeaguesTemplateProps {
viewData: ProfileLeaguesViewData;
@@ -16,67 +13,27 @@ interface ProfileLeaguesTemplateProps {
export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
return (
<Container size="md" py={8}>
<Stack gap={8}>
<Box>
<Heading level={1}>Manage leagues</Heading>
<Text color="text-gray-400" size="sm" block mt={2}>
View leagues you own and participate in, and jump into league admin tools.
</Text>
</Box>
{/* Leagues You Own */}
<Surface variant="muted" rounded="lg" border padding={6}>
<Stack gap={4}>
<Stack direction="row" align="center" justify="between">
<Heading level={2}>Leagues you own</Heading>
{viewData.ownedLeagues.length > 0 && (
<Text size="xs" color="text-gray-400">
{viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
</Text>
)}
</Stack>
{viewData.ownedLeagues.length === 0 ? (
<Text size="sm" color="text-gray-400">
You don&apos;t own any leagues yet in this session.
</Text>
) : (
<Stack gap={3}>
{viewData.ownedLeagues.map((league) => (
<LeagueListItem key={league.leagueId} league={league} isAdmin />
))}
</Stack>
)}
</Stack>
</Surface>
{/* Leagues You're In */}
<Surface variant="muted" rounded="lg" border padding={6}>
<Stack gap={4}>
<Stack direction="row" align="center" justify="between">
<Heading level={2}>Leagues you&apos;re in</Heading>
{viewData.memberLeagues.length > 0 && (
<Text size="xs" color="text-gray-400">
{viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
</Text>
)}
</Stack>
{viewData.memberLeagues.length === 0 ? (
<Text size="sm" color="text-gray-400">
You&apos;re not a member of any other leagues yet.
</Text>
) : (
<Stack gap={3}>
{viewData.memberLeagues.map((league) => (
<LeagueListItem key={league.leagueId} league={league} />
))}
</Stack>
)}
</Stack>
</Surface>
</Stack>
</Container>
<Stack gap={8}>
<Box as="header">
<Heading level={1}>My Leagues</Heading>
</Box>
<Box as="main">
<MembershipPanel
ownedLeagues={viewData.ownedLeagues.map(l => ({
...l,
description: '', // ViewData doesn't have description, but LeagueListItem needs it
memberCount: 0, // ViewData doesn't have memberCount
roleLabel: 'Owner'
}))}
memberLeagues={viewData.memberLeagues.map(l => ({
...l,
description: '',
memberCount: 0,
roleLabel: 'Member'
}))}
/>
</Box>
</Stack>
);
}