84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
'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>
|
|
);
|
|
}
|