website refactor

apps/website/components/social/FriendsPreview.tsx

@@ -1,5 +1,6 @@
+'use client';
 
-
+import React from 'react';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Box } from '@/ui/Box';
@@ -12,6 +13,7 @@ import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
 
 interface Friend {
   id: string;
@@ -39,17 +41,33 @@ export function FriendsPreview({ friends }: FriendsPreviewProps) {
         {friends.slice(0, 8).map((friend) => (
           <Box key={friend.id}>
             <Link
-              href={`/drivers/${friend.id}`}
+              href={routes.driver.detail(friend.id)}
               variant="ghost"
             >
-              <Surface variant="muted" rounded="xl" border padding={2} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626' }}>
-                <Box style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
+              <Surface 
+                variant="muted" 
+                rounded="xl" 
+                border 
+                p={2} 
+                display="flex" 
+                alignItems="center" 
+                gap={2} 
+                bg="bg-neutral-800/50" 
+                borderColor="border-neutral-800"
+              >
+                <Box 
+                  w="8" 
+                  h="8" 
+                  rounded="full" 
+                  overflow="hidden" 
+                  bg="bg-gradient-to-br from-blue-500 to-purple-600"
+                >
                  <Image
                    src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
                    alt={friend.name}
                    width={32}
                    height={32}
-                   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                   objectFit="cover"
                  />
                 </Box>
                 <Text size="sm" color="text-white">{friend.name}</Text>