46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
|
|
interface Friend {
|
|
id: string;
|
|
name: string;
|
|
country: string;
|
|
}
|
|
|
|
interface FriendPillProps {
|
|
friend: Friend;
|
|
}
|
|
|
|
function getCountryFlag(countryCode: string): string {
|
|
const code = countryCode.toUpperCase();
|
|
if (code.length === 2) {
|
|
const codePoints = [...code].map(char => 127397 + char.charCodeAt(0));
|
|
return String.fromCodePoint(...codePoints);
|
|
}
|
|
return '🏁';
|
|
}
|
|
|
|
export default function FriendPill({ friend }: FriendPillProps) {
|
|
const { mediaService } = useServices();
|
|
|
|
return (
|
|
<Link
|
|
href={`/drivers/${friend.id}`}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray transition-all"
|
|
>
|
|
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
|
|
<Image
|
|
src={mediaService.getDriverAvatar(friend.id)}
|
|
alt={friend.name}
|
|
width={32}
|
|
height={32}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-white">{friend.name}</span>
|
|
<span className="text-lg">{getCountryFlag(friend.country)}</span>
|
|
</Link>
|
|
);
|
|
} |