extract components from website

apps/website/components/social/FriendPill.tsx

@@ -0,0 +1,46 @@
+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>
+  );
+}