website refactor

apps/website/components/leagues/RosterTable.tsx

@@ -1,84 +1,26 @@
-import { Stack } from '@/ui/Stack';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
-import { Text } from '@/ui/Text';
+import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
 import { ReactNode } from 'react';
 
+interface Member {
+  driverId: string;
+  driverName: string;
+  role: string;
+  joinedAt: string;
+  joinedAtLabel: string;
+}
+
 interface RosterTableProps {
-  children: ReactNode;
-  columns?: string[];
+  members: Member[];
+  isAdmin?: boolean;
+  onRemoveMember?: (driverId: string) => void;
 }
 
-export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
+export function RosterTable({ members, isAdmin, onRemoveMember }: RosterTableProps) {
   return (
-    <Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
-      <Table>
-        <TableHead className="bg-base-graphite/50">
-          <TableRow>
-            {columns.map((col) => (
-              <TableHeader key={col} className="py-3 border-b border-border-steel-grey">
-                <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
-                  {col}
-                </Text>
-              </TableHeader>
-            ))}
-            <TableHeader className="py-3 border-b border-border-steel-grey">
-              {null}
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {children}
-        </TableBody>
-      </Table>
-    </Stack>
-  );
-}
-
-interface RosterTableRowProps {
-  driver: ReactNode;
-  role: ReactNode;
-  joined: string;
-  rating: ReactNode;
-  rank: ReactNode;
-  actions?: ReactNode;
-  onClick?: () => void;
-}
-
-export function RosterTableRow({
-  driver,
-  role,
-  joined,
-  rating,
-  rank,
-  actions,
-  onClick,
-}: RosterTableRowProps) {
-  return (
-    <TableRow 
-      onClick={onClick} 
-      clickable={!!onClick}
-      className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
-    >
-      <TableCell className="py-4">
-        {driver}
-      </TableCell>
-      <TableCell className="py-4">
-        {role}
-      </TableCell>
-      <TableCell className="py-4">
-        <Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
-      </TableCell>
-      <TableCell className="py-4">
-        {rating}
-      </TableCell>
-      <TableCell className="py-4">
-        {rank}
-      </TableCell>
-      <TableCell className="py-4 text-right">
-        <Stack direction="row" align="center" justify="end" gap={2}>
-          {actions}
-        </Stack>
-      </TableCell>
-    </TableRow>
+    <TeamMembersTable 
+      members={members} 
+      isAdmin={isAdmin} 
+      onRemoveMember={onRemoveMember} 
+    />
   );
 }