website refactor

apps/website/ui/LeagueMemberRow.tsx

@@ -0,0 +1,101 @@
+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>
+  );
+}