85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { mediaConfig } from '@/lib/config/mediaConfig';
|
|
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Card, Card as Surface } 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 { 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>
|
|
<Stack 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>
|
|
</Stack>
|
|
<Stack direction="row" gap={3} wrap>
|
|
{friends.slice(0, 8).map((friend) => (
|
|
<Stack key={friend.id}>
|
|
<Link
|
|
href={routes.driver.detail(friend.id)}
|
|
variant="ghost"
|
|
>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
p={2}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
bg="bg-neutral-800/50"
|
|
borderColor="border-neutral-800"
|
|
>
|
|
<Stack
|
|
w="8"
|
|
h="8"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
bg="bg-gradient-to-br from-blue-500 to-purple-600"
|
|
>
|
|
<Image
|
|
src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
|
|
alt={friend.name}
|
|
width={32}
|
|
height={32}
|
|
objectFit="cover"
|
|
/>
|
|
</Stack>
|
|
<Text size="sm" color="text-white">{friend.name}</Text>
|
|
<Text size="lg">{CountryFlagFormatter.fromCountryCode(friend.country).toString()}</Text>
|
|
</Surface>
|
|
</Link>
|
|
</Stack>
|
|
))}
|
|
{friends.length > 8 && (
|
|
<Stack p={2}>
|
|
<Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|