98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import { DateFormatter } from '@/lib/formatters/DateFormatter';
|
|
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Box } from '@/ui/Box';
|
|
import { DriverIdentity } from '@/ui/DriverIdentity';
|
|
import { TableCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { ReactNode } from 'react';
|
|
|
|
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,
|
|
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 variant="high">Unknown Driver</Text>
|
|
)}
|
|
{isCurrentUser && (
|
|
<Text size="xs" variant="low">(You)</Text>
|
|
)}
|
|
{isTopPerformer && (
|
|
<Text size="xs">⭐</Text>
|
|
)}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="primary" weight="medium">
|
|
{rating || '—'}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="med">
|
|
#{rank || '—'}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="success" weight="medium">
|
|
{wins || 0}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={roleVariant}>
|
|
{roleLabel}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="high" size="sm">
|
|
{DateFormatter.formatShort(joinedAt)}
|
|
</Text>
|
|
</TableCell>
|
|
{actions && (
|
|
<TableCell textAlign="right">
|
|
{actions}
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
);
|
|
}
|