website refactor

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>