72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
|
|
|
|
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 '@/components/social/FriendItem';
|
|
import { FriendsList } from '@/components/social/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>
|
|
);
|
|
}
|