website refactor

apps/website/ui/ActiveDriverCard.tsx

@@ -0,0 +1,65 @@
+import { Image } from '@/ui/Image';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/primitives/Surface';
+import React from 'react';
+
+export interface ActiveDriverCardProps {
+  name: string;
+  avatarUrl: string;
+  categoryLabel?: string;
+  skillLevelLabel?: string;
+  onClick: () => void;
+}
+
+export function ActiveDriverCard({
+  name,
+  avatarUrl,
+  categoryLabel,
+  skillLevelLabel,
+  onClick,
+}: ActiveDriverCardProps) {
+  return (
+    <Surface
+      as="button"
+      onClick={onClick}
+      variant="muted"
+      rounded="xl"
+      padding={3}
+      style={{ border: '1px solid var(--ui-color-border-default)', textAlign: 'center', cursor: 'pointer' }}
+    >
+      <Box position="relative" width={12} height={12} marginX="auto" marginBottom={2}>
+        <Box fullWidth fullHeight rounded="full" style={{ overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}>
+          <Image src={avatarUrl} alt={name} objectFit="cover" />
+        </Box>
+        <Box 
+          position="absolute" 
+          bottom={0} 
+          right={0} 
+          width={3} 
+          height={3} 
+          rounded="full" 
+          bg="var(--ui-color-intent-success)" 
+          style={{ border: '2px solid var(--ui-color-bg-surface)' }} 
+        />
+      </Box>
+      <Text 
+        size="sm" 
+        weight="medium" 
+        variant="high" 
+        truncate 
+        block 
+      >
+        {name}
+      </Text>
+      <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
+        {categoryLabel && (
+          <Text size="xs" variant="primary">{categoryLabel}</Text>
+        )}
+        {skillLevelLabel && (
+          <Text size="xs" variant="telemetry">{skillLevelLabel}</Text>
+        )}
+      </Box>
+    </Surface>
+  );
+}