73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import { FriendItem } from '@/components/social/FriendItem';
|
|
import { FriendsList } from '@/components/social/FriendsList';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Card } from '@/ui/Card';
|
|
import { SectionHeader } from '@/ui/SectionHeader';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { UserPlus, Users } from 'lucide-react';
|
|
import React from '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>
|
|
<SectionHeader
|
|
title="Friends"
|
|
description={`${friends.length} friends`}
|
|
variant="minimal"
|
|
actions={<Icon icon={Users} size={5} intent="primary" />}
|
|
/>
|
|
{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 paddingY={2}>
|
|
<Link
|
|
href={routes.protected.profile}
|
|
variant="primary"
|
|
>
|
|
<Text size="sm" block align="center">+{friends.length - 6} more</Text>
|
|
</Link>
|
|
</Box>
|
|
)}
|
|
</FriendsList>
|
|
) : (
|
|
<EmptyState
|
|
icon={UserPlus}
|
|
title="No friends yet"
|
|
description="Find drivers to follow"
|
|
action={{
|
|
label: 'Find Drivers',
|
|
onClick: () => window.location.href = routes.public.drivers
|
|
}}
|
|
variant="minimal"
|
|
/>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|