website refactor

apps/website/ui/ActiveDriverCard.tsx

@@ -1,67 +0,0 @@
-
-
-import { Box } from './Box';
-import { Image } from './Image';
-import { Text } from './Text';
-
-interface ActiveDriverCardProps {
-  name: string;
-  avatarUrl?: string;
-  categoryLabel?: string;
-  categoryColor?: string;
-  skillLevelLabel?: string;
-  skillLevelColor?: string;
-  onClick: () => void;
-}
-
-export function ActiveDriverCard({
-  name,
-  avatarUrl,
-  categoryLabel,
-  categoryColor,
-  skillLevelLabel,
-  skillLevelColor,
-  onClick,
-}: ActiveDriverCardProps) {
-  return (
-    <Box
-      as="button"
-      type="button"
-      onClick={onClick}
-      p={3}
-      rounded="xl"
-      bg="bg-iron-gray/40"
-      border
-      borderColor="border-charcoal-outline"
-      transition
-      cursor="pointer"
-      hoverBorderColor="performance-green/40"
-      group
-      textAlign="center"
-    >
-      <Box position="relative" w="12" h="12" mx="auto" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" mb={2}>
-        <Image src={avatarUrl || '/default-avatar.png'} alt={name} objectFit="cover" fill />
-        <Box position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }} />
-      </Box>
-      <Text 
-        size="sm" 
-        weight="medium" 
-        color="text-white" 
-        truncate 
-        block 
-        groupHoverTextColor="performance-green"
-        transition
-      >
-        {name}
-      </Text>
-      <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
-        {categoryLabel && (
-          <Text size="xs" color={categoryColor}>{categoryLabel}</Text>
-        )}
-        {skillLevelLabel && (
-          <Text size="xs" color={skillLevelColor}>{skillLevelLabel}</Text>
-        )}
-      </Box>
-    </Box>
-  );
-}