website refactor

apps/website/components/drivers/DriverIdentity.tsx

@@ -0,0 +1,84 @@
+import Link from 'next/link';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { Image } from '@/ui/Image';
+
+export interface DriverIdentityProps {
+  driver: {
+    id: string;
+    name: string;
+    avatarUrl: string | null;
+  };
+  href?: string;
+  contextLabel?: React.ReactNode;
+  meta?: React.ReactNode;
+  size?: 'sm' | 'md';
+}
+
+export function DriverIdentity(props: DriverIdentityProps) {
+  const { driver, href, contextLabel, meta, size = 'md' } = props;
+
+  const avatarSize = size === 'sm' ? 40 : 48;
+  const nameSize = size === 'sm' ? 'sm' : 'base';
+
+  const avatarUrl = driver.avatarUrl;
+
+  const content = (
+    <Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">
+      <Box
+        rounded="full"
+        bg="bg-primary-blue/20"
+        overflow="hidden"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        flexShrink={0}
+        style={{ width: avatarSize, height: avatarSize }}
+      >
+        {avatarUrl ? (
+          <Image
+            src={avatarUrl}
+            alt={driver.name}
+            width={avatarSize}
+            height={avatarSize}
+            fullWidth
+            fullHeight
+            objectFit="cover"
+          />
+        ) : (
+          <PlaceholderImage size={avatarSize} />
+        )}
+      </Box>
+
+      <Box flexGrow={1} minWidth="0">
+        <Box display="flex" alignItems="center" gap={2} minWidth="0">
+          <Text size={nameSize} weight="medium" color="text-white" className="truncate">
+            {driver.name}
+          </Text>
+          {contextLabel && (
+            <Badge variant="default" className="bg-charcoal-outline/60 text-[10px] md:text-xs">
+              {contextLabel}
+            </Badge>
+          )}
+        </Box>
+        {meta && (
+          <Text size="xs" color="text-gray-400" mt={0.5} className="truncate" block>
+            {meta}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
+        {content}
+      </Link>
+    );
+  }
+
+  return <Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">{content}</Box>;
+}