102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { TableRow, TableCell } from './Table';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Badge } from './Badge';
|
|
import { DriverIdentity } from './DriverIdentity';
|
|
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
|
|
interface LeagueMemberRowProps {
|
|
driver?: DriverViewModel;
|
|
driverId: string;
|
|
isCurrentUser: boolean;
|
|
isTopPerformer: boolean;
|
|
role: string;
|
|
roleVariant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
joinedAt: string | Date;
|
|
rating?: number | string;
|
|
rank?: number | string;
|
|
wins?: number;
|
|
actions?: ReactNode;
|
|
href: string;
|
|
meta?: string | null;
|
|
}
|
|
|
|
export function LeagueMemberRow({
|
|
driver,
|
|
driverId,
|
|
isCurrentUser,
|
|
isTopPerformer,
|
|
role,
|
|
roleVariant,
|
|
joinedAt,
|
|
rating,
|
|
rank,
|
|
wins,
|
|
actions,
|
|
href,
|
|
meta,
|
|
}: LeagueMemberRowProps) {
|
|
const roleLabel = role.charAt(0).toUpperCase() + role.slice(1);
|
|
|
|
return (
|
|
<TableRow variant={isTopPerformer ? 'highlight' : 'default'}>
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{driver ? (
|
|
<DriverIdentity
|
|
driver={driver}
|
|
href={href}
|
|
contextLabel={roleLabel}
|
|
meta={meta}
|
|
size="md"
|
|
/>
|
|
) : (
|
|
<Text color="text-white">Unknown Driver</Text>
|
|
)}
|
|
{isCurrentUser && (
|
|
<Text size="xs" color="text-gray-500">(You)</Text>
|
|
)}
|
|
{isTopPerformer && (
|
|
<Text size="xs">⭐</Text>
|
|
)}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-primary-blue" weight="medium">
|
|
{rating || '—'}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-gray-300">
|
|
#{rank || '—'}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-green-400" weight="medium">
|
|
{wins || 0}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={roleVariant}>
|
|
{roleLabel}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-white" size="sm">
|
|
{new Date(joinedAt).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</Text>
|
|
</TableCell>
|
|
{actions && (
|
|
<TableCell align="right">
|
|
{actions}
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
);
|
|
}
|