website refactor

apps/website/components/teams/TeamMembersTable.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
+
+interface Member {
+  driverId: string;
+  driverName: string;
+  role: string;
+  joinedAt: string;
+}
+
+interface TeamMembersTableProps {
+  members: Member[];
+  isAdmin?: boolean;
+  onRemoveMember?: (driverId: string) => void;
+}
+
+export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
+  return (
+    <Box border borderColor="outline-steel" bg="surface-charcoal/30">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Personnel</TableHeader>
+            <TableHeader>Role</TableHeader>
+            <TableHeader>Joined</TableHeader>
+            <TableHeader textAlign="right">Rating</TableHeader>
+            {isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {members.map((member) => (
+            <TableRow key={member.driverId}>
+              <TableCell>
+                <Stack direction="row" align="center" gap={3}>
+                  <Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
+                    <Text size="xs" weight="bold" color="primary-accent">{member.driverName.substring(0, 2).toUpperCase()}</Text>
+                  </Box>
+                  <Text weight="bold" size="sm" color="text-white">{member.driverName}</Text>
+                </Stack>
+              </TableCell>
+              <TableCell>
+                <Box px={2} py={0.5} bg="base-black" border borderColor="outline-steel" display="inline-block">
+                  <Text size="xs" color="text-gray-400" font="mono" uppercase>{member.role}</Text>
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Text size="xs" color="text-gray-500" font="mono">
+                  {new Date(member.joinedAt).toLocaleDateString()}
+                </Text>
+              </TableCell>
+              <TableCell textAlign="right">
+                <Text font="mono" weight="bold" color="primary-accent">1450</Text>
+              </TableCell>
+              {isAdmin && (
+                <TableCell textAlign="right">
+                  {member.role !== 'owner' && (
+                    <Button 
+                      variant="secondary" 
+                      size="sm" 
+                      onClick={() => onRemoveMember?.(member.driverId)}
+                    >
+                      DECOMMISSION
+                    </Button>
+                  )}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}