website refactor

apps/website/components/feed/RecentActivity.tsx

@@ -1,28 +1,13 @@
 
 
-import { ActiveDriverCard } from '@/components/drivers/ActiveDriverCard';
+'use client';
+
+import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
 import { mediaConfig } from '@/lib/config/mediaConfig';
-import { Heading } from '@/ui/Heading';
+import { SectionHeader } from '@/ui/SectionHeader';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
-
-const SKILL_LEVELS = [
-  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
-  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
-  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
-  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
-];
-
-const CATEGORIES = [
-  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
-  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
-  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
-  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
-  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
-  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
-];
+import React from 'react';
 
 interface RecentActivityProps {
   drivers: {
@@ -40,45 +25,28 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
   const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
 
   return (
-    <Box mb={10}>
-      <Box display="flex" alignItems="center" gap={3} mb={4}>
-        <Box 
-          display="flex" 
-          h="10" 
-          w="10" 
-          alignItems="center" 
-          justifyContent="center" 
-          rounded="xl" 
-          bg="bg-performance-green/10" 
-          border 
-          borderColor="border-performance-green/20"
-        >
-          <Icon icon={Activity} size={5} color="rgb(16, 185, 129)" />
-        </Box>
-        <Box>
-          <Heading level={2}>Active Drivers</Heading>
-          <Text size="xs" color="text-gray-500">Currently competing in leagues</Text>
-        </Box>
-      </Box>
+    <div style={{ marginBottom: '2.5rem' }}>
+      <SectionHeader
+        title="Active Drivers"
+        description="Currently competing in leagues"
+        variant="minimal"
+        actions={<Icon icon={Activity} size={5} intent="success" />}
+      />
 
-      <Box display="grid" responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={3}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '0.75rem' }}>
         {activeDrivers.map((driver) => {
-          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
-          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
           return (
             <ActiveDriverCard
               key={driver.id}
               name={driver.name}
               avatarUrl={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
-              categoryLabel={categoryConfig?.label}
-              categoryColor={categoryConfig?.color}
-              skillLevelLabel={levelConfig?.label}
-              skillLevelColor={levelConfig?.color}
+              categoryLabel={driver.category}
+              skillLevelLabel={driver.skillLevel}
               onClick={() => onDriverClick(driver.id)}
             />
           );
         })}
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }