33 lines
965 B
TypeScript
33 lines
965 B
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { getCountryFlag } from '@/lib/utilities/country';
|
|
|
|
interface FriendItemProps {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
}
|
|
|
|
export function FriendItem({ id, name, avatarUrl, country }: FriendItemProps) {
|
|
return (
|
|
<Link
|
|
href={`/drivers/${id}`}
|
|
className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
|
|
>
|
|
<div className="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={name}
|
|
width={36}
|
|
height={36}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-white text-sm font-medium truncate">{name}</p>
|
|
<p className="text-xs text-gray-500">{getCountryFlag(country)}</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |