110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import type { ProfileLeaguesViewData } from './ProfileLeaguesViewData';
|
|
|
|
interface ProfileLeaguesTemplateProps {
|
|
viewData: ProfileLeaguesViewData;
|
|
}
|
|
|
|
export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
|
|
return (
|
|
<div className="max-w-6xl mx-auto space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white mb-2">Manage leagues</h1>
|
|
<p className="text-gray-400 text-sm">
|
|
View leagues you own and participate in, and jump into league admin tools.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Leagues You Own */}
|
|
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-white">Leagues you own</h2>
|
|
{viewData.ownedLeagues.length > 0 && (
|
|
<span className="text-xs text-gray-400">
|
|
{viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{viewData.ownedLeagues.length === 0 ? (
|
|
<p className="text-sm text-gray-400">
|
|
You don't own any leagues yet in this session.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{viewData.ownedLeagues.map((league) => (
|
|
<div
|
|
key={league.leagueId}
|
|
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
|
>
|
|
<div>
|
|
<h3 className="text-white font-medium">{league.name}</h3>
|
|
<p className="text-xs text-gray-400 mt-1 line-clamp-2">
|
|
{league.description}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<a
|
|
href={`/leagues/${league.leagueId}`}
|
|
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
|
|
>
|
|
View
|
|
</a>
|
|
<a href={`/leagues/${league.leagueId}?tab=admin`}>
|
|
<button className="bg-primary hover:bg-primary/90 text-white text-xs px-3 py-1.5 rounded transition-colors">
|
|
Manage
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Leagues You're In */}
|
|
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
|
|
{viewData.memberLeagues.length > 0 && (
|
|
<span className="text-xs text-gray-400">
|
|
{viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{viewData.memberLeagues.length === 0 ? (
|
|
<p className="text-sm text-gray-400">
|
|
You're not a member of any other leagues yet.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{viewData.memberLeagues.map((league) => (
|
|
<div
|
|
key={league.leagueId}
|
|
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
|
>
|
|
<div>
|
|
<h3 className="text-white font-medium">{league.name}</h3>
|
|
<p className="text-xs text-gray-400 mt-1 line-clamp-2">
|
|
{league.description}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Your role:{' '}
|
|
{league.membershipRole.charAt(0).toUpperCase() + league.membershipRole.slice(1)}
|
|
</p>
|
|
</div>
|
|
<a
|
|
href={`/leagues/${league.leagueId}`}
|
|
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
|
|
>
|
|
View league
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|