website refactor

apps/website/components/social/FriendsPreview.tsx

@@ -0,0 +1,69 @@
+
+
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+import { Box } from '@/ui/Box';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Image } from '@/ui/Image';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { Users } from 'lucide-react';
+
+interface Friend {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+  country: string;
+}
+
+interface FriendsPreviewProps {
+  friends: Friend[];
+}
+
+export function FriendsPreview({ friends }: FriendsPreviewProps) {
+  return (
+    <Card>
+      <Box mb={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={2} icon={<Icon icon={Users} size={5} color="#a855f7" />}>
+            Friends
+          </Heading>
+          <Text size="sm" color="text-gray-500" weight="normal">({friends.length})</Text>
+        </Stack>
+      </Box>
+      <Stack direction="row" gap={3} wrap>
+        {friends.slice(0, 8).map((friend) => (
+          <Box key={friend.id}>
+            <Link
+              href={`/drivers/${friend.id}`}
+              variant="ghost"
+            >
+              <Surface variant="muted" rounded="xl" border padding={2} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626' }}>
+                <Box style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
+                 <Image
+                   src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
+                   alt={friend.name}
+                   width={32}
+                   height={32}
+                   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                 />
+                </Box>
+                <Text size="sm" color="text-white">{friend.name}</Text>
+                <Text size="lg">{CountryFlagDisplay.fromCountryCode(friend.country).toString()}</Text>
+              </Surface>
+            </Link>
+          </Box>
+        ))}
+        {friends.length > 8 && (
+          <Box p={2}>
+            <Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
+          </Box>
+        )}
+      </Stack>
+    </Card>
+  );
+}

apps/website/components/social/FriendsSidebar.tsx

@@ -0,0 +1,71 @@
+
+
+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 { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { UserPlus, Users } from 'lucide-react';
+
+interface Friend {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  country: string;
+}
+
+interface FriendsSidebarProps {
+  friends: Friend[];
+  hasFriends: boolean;
+}
+
+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>
+      {hasFriends ? (
+        <FriendsList>
+          {friends.slice(0, 6).map((friend) => (
+            <FriendItem
+              key={friend.id}
+              name={friend.name}
+              avatarUrl={friend.avatarUrl}
+              country={friend.country}
+            />
+          ))}
+          {friends.length > 6 && (
+            <Box py={2}>
+              <Link
+                href={routes.protected.profile}
+                variant="primary"
+              >
+                <Text size="sm" block align="center">+{friends.length - 6} more</Text>
+              </Link>
+            </Box>
+          )}
+        </FriendsList>
+      ) : (
+        <MinimalEmptyState
+          icon={UserPlus}
+          title="No friends yet"
+          description="Find drivers to follow"
+          action={{
+            label: 'Find Drivers',
+            onClick: () => window.location.href = routes.public.drivers
+          }}
+        />
+      )}
+    </Card>
+  );
+}