website refactor

apps/website/ui/FriendItem.tsx

@@ -0,0 +1,49 @@
+
+
+import { Box } from './Box';
+import { Image } from './Image';
+import { Surface } from './Surface';
+import { Text } from './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>
+  );
+}