website refactor

apps/website/ui/DriverIdentity.tsx

@@ -0,0 +1,62 @@
+import { Badge } from '@/ui/Badge';
+import { Image } from '@/ui/Image';
+import { Link } from '@/ui/Link';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
+import { Avatar } from '@/ui/Avatar';
+import React from 'react';
+
+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({ driver, href, contextLabel, meta, size = 'md' }: DriverIdentityProps) {
+  const nameSize = size === 'sm' ? 'sm' : 'base';
+
+  const content = (
+    <Box display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">
+      <Avatar
+        src={driver.avatarUrl || undefined}
+        alt={driver.name}
+        size={size === 'sm' ? 'sm' : 'md'}
+      />
+
+      <Box flex={1} minWidth="0">
+        <Box display="flex" alignItems="center" gap={2} minWidth="0">
+          <Text size={nameSize as any} weight="medium" variant="high" truncate>
+            {driver.name}
+          </Text>
+          {contextLabel && (
+            <Badge variant="default" size="sm">
+              {contextLabel}
+            </Badge>
+          )}
+        </Box>
+        {meta && (
+          <Text size="xs" variant="low" block truncate>
+            {meta}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} block variant="inherit" underline="none">
+        {content}
+      </Link>
+    );
+  }
+
+  return <Box display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">{content}</Box>;
+}