website refactor

apps/website/ui/TeamRosterItem.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { DriverIdentity } from './DriverIdentity';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+
+interface TeamRosterItemProps {
+  driver: DriverViewModel;
+  href: string;
+  roleLabel: string;
+  joinedAt: string | Date;
+  rating: number | null;
+  overallRank: number | null;
+  actions?: ReactNode;
+}
+
+export function TeamRosterItem({
+  driver,
+  href,
+  roleLabel,
+  joinedAt,
+  rating,
+  overallRank,
+  actions,
+}: TeamRosterItemProps) {
+  return (
+    <Box
+      bg="bg-iron-gray/50"
+      rounded="lg"
+      border={true}
+      borderColor="border-charcoal-outline"
+      p={4}
+    >
+      <Stack direction="row" align="center" justify="between" wrap gap={4}>
+        <DriverIdentity
+          driver={driver}
+          href={href}
+          contextLabel={roleLabel}
+          meta={
+            <Text size="xs" color="text-gray-400">
+              {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
+            </Text>
+          }
+          size="md"
+        />
+
+        {rating !== null && (
+          <Stack direction="row" align="center" gap={6}>
+            <Box display="flex" flexDirection="col" alignItems="center">
+              <Text size="lg" weight="bold" color="text-primary-blue" block>
+                {rating}
+              </Text>
+              <Text size="xs" color="text-gray-400">Rating</Text>
+            </Box>
+            {overallRank !== null && (
+              <Box display="flex" flexDirection="col" alignItems="center">
+                <Text size="sm" color="text-gray-300" block>#{overallRank}</Text>
+                <Text size="xs" color="text-gray-500">Rank</Text>
+              </Box>
+            )}
+          </Stack>
+        )}
+
+        {actions && (
+          <Stack direction="row" align="center" gap={2}>
+            {actions}
+          </Stack>
+        )}
+      </Stack>
+    </Box>
+  );
+}