website refactor

apps/website/components/social/FriendItem.tsx

@@ -0,0 +1,49 @@
+
+
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface FriendItemProps {
+  name: string;
+  avatarUrl: string;
+  country: string;
+}
+
+export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
+  return (
+    <Surface
+      variant="muted"
+      padding={2}
+      rounded="lg"
+      style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
+    >
+      <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>
+  );
+}

apps/website/components/social/FriendsList.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { Stack } from '@/ui/Stack';
+
+interface FriendsListProps {
+  children: ReactNode;
+}
+
+export function FriendsList({ children }: FriendsListProps) {
+  return (
+    <Stack gap={2}>
+      {children}
+    </Stack>
+  );
+}

apps/website/components/social/FriendsSidebar.tsx

@@ -4,8 +4,8 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
-import { FriendItem } from '@/ui/FriendItem';
-import { FriendsList } from '@/ui/FriendsList';
+import { FriendItem } from '@/components/social/FriendItem';
+import { FriendsList } from '@/components/social/FriendsList';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';