website refactor
This commit is contained in:
@@ -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'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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user