website refactor

apps/website/app/leagues/[id]/roster/page.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}