83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
'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 type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
|
|
import { LeagueListItem } from '@/ui/LeagueListItem';
|
|
|
|
interface ProfileLeaguesTemplateProps {
|
|
viewData: ProfileLeaguesViewData;
|
|
}
|
|
|
|
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'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'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'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>
|
|
);
|
|
}
|