website refactor
This commit is contained in:
@@ -1,9 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
|
||||
interface Member {
|
||||
driverId: string;
|
||||
@@ -21,40 +24,54 @@ interface TeamMembersTableProps {
|
||||
|
||||
export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
|
||||
return (
|
||||
<Stack border borderColor="outline-steel" bg="surface-charcoal/30">
|
||||
<Surface variant="precision" padding="none">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Personnel</TableHeader>
|
||||
<TableHeader>Role</TableHeader>
|
||||
<TableHeader>Joined</TableHeader>
|
||||
<TableHeader textAlign="right">Rating</TableHeader>
|
||||
{isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
|
||||
</TableRow>
|
||||
<TableHeaderCell>Personnel</TableHeaderCell>
|
||||
<TableHeaderCell>Role</TableHeaderCell>
|
||||
<TableHeaderCell>Joined</TableHeaderCell>
|
||||
<TableHeaderCell textAlign="right">Rating</TableHeaderCell>
|
||||
{isAdmin && <TableHeaderCell textAlign="right">Actions</TableHeaderCell>}
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{members.map((member) => (
|
||||
<TableRow key={member.driverId}>
|
||||
<TableCell>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Stack 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>
|
||||
</Stack>
|
||||
<Text weight="bold" size="sm" color="text-white">{member.driverName}</Text>
|
||||
<Stack direction="row" align="center" gap="sm">
|
||||
<Box
|
||||
width={10}
|
||||
height={10}
|
||||
bg="var(--ui-color-bg-base)"
|
||||
border="1px solid var(--ui-color-border-muted)"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
rounded="md"
|
||||
>
|
||||
<Text size="xs" weight="bold" variant="primary" mono>{member.driverName.substring(0, 2).toUpperCase()}</Text>
|
||||
</Box>
|
||||
<Text weight="bold" size="sm">{member.driverName}</Text>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack 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>
|
||||
</Stack>
|
||||
<Box
|
||||
paddingX={2}
|
||||
paddingY={0.5}
|
||||
bg="rgba(255,255,255,0.02)"
|
||||
border="1px solid var(--ui-color-border-muted)"
|
||||
display="inline-block"
|
||||
rounded="sm"
|
||||
>
|
||||
<Text size="xs" variant="low" mono uppercase>{member.role}</Text>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-500" font="mono">
|
||||
<Text size="xs" variant="low" mono>
|
||||
{member.joinedAtLabel}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell textAlign="right">
|
||||
<Text font="mono" weight="bold" color="primary-accent">1450</Text>
|
||||
<Text mono weight="bold" variant="primary">1450</Text>
|
||||
</TableCell>
|
||||
{isAdmin && (
|
||||
<TableCell textAlign="right">
|
||||
@@ -73,6 +90,6 @@ export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembe
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user