website refactor

apps/website/components/dashboard/FriendsSidebar.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { Users, UserPlus } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { Image } from '@/ui/Image';
+import { Button } from '@/ui/Button';
+import { routes } from '@/lib/routing/RouteConfig';
+
+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 gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3} icon={<Users style={{ width: '1.25rem', height: '1.25rem', color: '#a855f7' }} />}>
+            Friends
+          </Heading>
+          <Text size="xs" color="text-gray-500">{friends.length} friends</Text>
+        </Stack>
+        {hasFriends ? (
+          <Stack gap={2}>
+            {friends.slice(0, 6).map((friend) => (
+              <Box key={friend.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem', borderRadius: '0.5rem' }}>
+                <Box style={{ width: '2.25rem', height: '2.25rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
+                  <Image
+                    src={friend.avatarUrl}
+                    alt={friend.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>{friend.name}</Text>
+                  <Text size="xs" color="text-gray-500" block>{friend.country}</Text>
+                </Box>
+              </Box>
+            ))}
+            {friends.length > 6 && (
+              <Box py={2}>
+                <Link
+                  href={routes.protected.profile}
+                  variant="primary"
+                >
+                  <Text size="sm" block style={{ textAlign: 'center' }}>+{friends.length - 6} more</Text>
+                </Link>
+              </Box>
+            )}
+          </Stack>
+        ) : (
+          <Stack align="center" gap={2} py={6}>
+            <UserPlus style={{ width: '2rem', height: '2rem', color: '#525252' }} />
+            <Text size="sm" color="text-gray-400">No friends yet</Text>
+            <Box>
+              <Link href={routes.public.drivers} variant="ghost">
+                <Button variant="secondary" size="sm">
+                  Find Drivers
+                </Button>
+              </Link>
+            </Box>
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}