extract components from website

apps/website/components/dashboard/FriendItem.tsx

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