mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-14 23:31:57 +01:00
parent fbae5e6185
commit c1a86348d7
93 changed files with 7268 additions and 9088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
apps/website/templates/ProfileLeaguesTemplate.tsx
View File

@@ -1,4 +1,14 @@
'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 '@/components/profile/LeagueListItem';
interface ProfileLeaguesTemplateProps {
viewData: ProfileLeaguesViewData;
@@ -6,104 +16,67 @@ interface ProfileLeaguesTemplateProps {
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>
<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 */}
<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>
{/* 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 ? (
<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: ProfileLeaguesViewData['ownedLeagues'][number]) => (
<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>
{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 */}
<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>
{/* 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 ? (
<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: ProfileLeaguesViewData['memberLeagues'][number]) => (
<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>
{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>
);
}