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>
   );
 }