67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { LeagueListItem } from '@/components/leagues/LeagueListItem';
|
|
import { Card } from '@/ui/Card';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { ProfileSection } from './ProfileSection';
|
|
import React from 'react';
|
|
|
|
interface League {
|
|
leagueId: string;
|
|
name: string;
|
|
description: string;
|
|
logoUrl?: string;
|
|
memberCount: number;
|
|
roleLabel: string;
|
|
}
|
|
|
|
interface MembershipPanelProps {
|
|
ownedLeagues: League[];
|
|
memberLeagues: League[];
|
|
}
|
|
|
|
export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
|
|
return (
|
|
<Stack gap={8}>
|
|
<ProfileSection
|
|
title="Leagues You Own"
|
|
description="Manage the leagues you have created and lead."
|
|
>
|
|
{ownedLeagues.length === 0 ? (
|
|
<Card>
|
|
<Text size="sm" variant="low">
|
|
You don't own any leagues yet.
|
|
</Text>
|
|
</Card>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{ownedLeagues.map((league) => (
|
|
<LeagueListItem key={league.leagueId} league={league} isAdmin />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</ProfileSection>
|
|
|
|
<ProfileSection
|
|
title="Leagues You're In"
|
|
description="Leagues where you are a participating member."
|
|
>
|
|
{memberLeagues.length === 0 ? (
|
|
<Card>
|
|
<Text size="sm" variant="low">
|
|
You're not a member of any other leagues yet.
|
|
</Text>
|
|
</Card>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{memberLeagues.map((league) => (
|
|
<LeagueListItem key={league.leagueId} league={league} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</ProfileSection>
|
|
</Stack>
|
|
);
|
|
}
|