wip

apps/website/components/profile/DriverSummaryPill.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import DriverRating from '@/components/profile/DriverRatingPill';
+import { getImageService } from '@/lib/di-container';
+
+export interface DriverSummaryPillProps {
+  driver: DriverDTO;
+  rating: number | null;
+  rank: number | null;
+  avatarSrc?: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+export default function DriverSummaryPill(props: DriverSummaryPillProps) {
+  const { driver, rating, rank, avatarSrc, onClick, href } = props;
+
+  const resolvedAvatar =
+    avatarSrc ?? getImageService().getDriverAvatar(driver.id);
+
+  const content = (
+    <>
+      <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
+        <Image
+          src={resolvedAvatar}
+          alt={driver.name}
+          width={32}
+          height={32}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="flex flex-col leading-tight text-left">
+        <span className="text-xs font-semibold text-white truncate max-w-[140px]">
+          {driver.name}
+        </span>
+
+        <DriverRating rating={rating} rank={rank} />
+      </div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80">
+      {content}
+    </div>
+  );
+}