67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
|
|
import { notFound } from 'next/navigation';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface Props {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function LeagueRosterPage({ params }: Props) {
|
|
const { id: leagueId } = await params;
|
|
const result = await LeagueDetailPageQuery.execute(leagueId);
|
|
|
|
if (result.isErr()) {
|
|
notFound();
|
|
}
|
|
|
|
const data = result.unwrap();
|
|
const members = data.memberships.members || [];
|
|
|
|
return (
|
|
<Stack gap={8}>
|
|
<Box as="header" display="flex" flexDirection="col" gap={2}>
|
|
<Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">League Roster</Text>
|
|
<Text size="sm" color="text-zinc-500">All drivers currently registered in this league.</Text>
|
|
</Box>
|
|
|
|
<Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-zinc-800 bg-zinc-900/50">
|
|
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Driver</th>
|
|
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Role</th>
|
|
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Joined</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{members.map((member) => (
|
|
<tr key={member.driverId} className="border-b border-zinc-800/50 hover:bg-zinc-800/30 transition-colors">
|
|
<td className="px-6 py-4">
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box w="8" h="8" bg="zinc-800" rounded="full" />
|
|
<Text weight="bold" color="text-white">{member.driver.name}</Text>
|
|
</Box>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<Text size="xs" color="text-zinc-400" uppercase weight="bold">{member.role}</Text>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<Text size="sm" color="text-zinc-500">{new Date(member.joinedAt).toLocaleDateString()}</Text>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{members.length === 0 && (
|
|
<tr>
|
|
<td colSpan={3} className="px-6 py-12 text-center">
|
|
<Text color="text-zinc-600" italic>No members found in this league.</Text>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
} |