website refactor

apps/website/components/social/FriendItem.tsx

@@ -1,9 +1,9 @@
-
+'use client';
 
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
+import { SidebarItem } from '@/ui/SidebarItem';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface FriendItemProps {
   name: string;
@@ -13,37 +13,25 @@ interface FriendItemProps {
 
 export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
   return (
-    <Surface
-      variant="muted"
-      padding={2}
-      rounded="lg"
-      style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
+    <SidebarItem
+      icon={
+        <div style={{ width: '100%', height: '100%', borderRadius: '9999px', overflow: 'hidden' }}>
+          <Image
+            src={avatarUrl}
+            alt={name}
+            width={36}
+            height={36}
+            objectFit="cover"
+          />
+        </div>
+      }
     >
-      <Box
-        w="9"
-        h="9"
-        rounded="full"
-        overflow="hidden"
-        style={{
-          background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
-        }}
-      >
-        <Image
-          src={avatarUrl}
-          alt={name}
-          width={36}
-          height={36}
-          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-        />
-      </Box>
-      <Box style={{ flex: 1, minWidth: 0 }}>
-        <Text size="sm" color="text-white" weight="medium" truncate block>
-          {name}
-        </Text>
-        <Text size="xs" color="text-gray-500" block>
-          {country}
-        </Text>
-      </Box>
-    </Surface>
+      <Text size="sm" variant="high" weight="medium" truncate block>
+        {name}
+      </Text>
+      <Text size="xs" variant="low" block>
+        {country}
+      </Text>
+    </SidebarItem>
   );
 }

apps/website/components/social/FriendsList.tsx

@@ -1,5 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface FriendsListProps {
   children: ReactNode;
@@ -7,8 +6,8 @@ interface FriendsListProps {
 
 export function FriendsList({ children }: FriendsListProps) {
   return (
-    <Stack gap={2}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
       {children}
-    </Stack>
+    </div>
   );
 }

apps/website/components/social/FriendsSidebar.tsx

@@ -1,16 +1,16 @@
+'use client';
 
-
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 import { FriendItem } from '@/components/social/FriendItem';
 import { FriendsList } from '@/components/social/FriendsList';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
+import { SectionHeader } from '@/ui/SectionHeader';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus, Users } from 'lucide-react';
+import React from 'react';
 
 interface Friend {
   id: string;
@@ -27,12 +27,12 @@ interface FriendsSidebarProps {
 export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
   return (
     <Card>
-      <Stack direction="row" align="center" justify="between" mb={4}>
-        <Heading level={3} icon={<Icon icon={Users} size={5} color="var(--neon-purple)" />}>
-          Friends
-        </Heading>
-        <Text size="xs" color="text-gray-500">{friends.length} friends</Text>
-      </Stack>
+      <SectionHeader
+        title="Friends"
+        description={`${friends.length} friends`}
+        variant="minimal"
+        actions={<Icon icon={Users} size={5} intent="primary" />}
+      />
       {hasFriends ? (
         <FriendsList>
           {friends.slice(0, 6).map((friend) => (
@@ -44,18 +44,18 @@ export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
             />
           ))}
           {friends.length > 6 && (
-            <Stack py={2}>
+            <div style={{ padding: '0.5rem 0' }}>
               <Link
                 href={routes.protected.profile}
                 variant="primary"
               >
                 <Text size="sm" block align="center">+{friends.length - 6} more</Text>
               </Link>
-            </Stack>
+            </div>
           )}
         </FriendsList>
       ) : (
-        <MinimalEmptyState
+        <EmptyState
           icon={UserPlus}
           title="No friends yet"
           description="Find drivers to follow"
@@ -63,6 +63,7 @@ export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
             label: 'Find Drivers',
             onClick: () => window.location.href = routes.public.drivers
           }}
+          variant="minimal"
         />
       )}
     </Card>