71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import { Image } from '@/ui/Image';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
import { mediaConfig } from '@/lib/config/mediaConfig';
|
|
|
|
interface Friend {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl?: string;
|
|
country: string;
|
|
}
|
|
|
|
interface FriendsPreviewProps {
|
|
friends: Friend[];
|
|
}
|
|
|
|
export function FriendsPreview({ friends }: FriendsPreviewProps) {
|
|
return (
|
|
<Card>
|
|
<Box 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>
|
|
</Box>
|
|
<Stack direction="row" gap={3} wrap>
|
|
{friends.slice(0, 8).map((friend) => (
|
|
<Box key={friend.id}>
|
|
<Link
|
|
href={`/drivers/${friend.id}`}
|
|
variant="ghost"
|
|
>
|
|
<Surface variant="muted" rounded="xl" border padding={2} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626' }}>
|
|
<Box style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
|
|
<Image
|
|
src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
|
|
alt={friend.name}
|
|
width={32}
|
|
height={32}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Box>
|
|
<Text size="sm" color="text-white">{friend.name}</Text>
|
|
<Text size="lg">{CountryFlagDisplay.fromCountryCode(friend.country).toString()}</Text>
|
|
</Surface>
|
|
</Link>
|
|
</Box>
|
|
))}
|
|
{friends.length > 8 && (
|
|
<Box p={2}>
|
|
<Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|