wip

apps/website/components/drivers/DriverIdentity.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { getImageService } from '@/lib/di-container';
+
+export interface DriverIdentityProps {
+  driver: DriverDTO;
+  href?: string;
+  contextLabel?: React.ReactNode;
+  meta?: React.ReactNode;
+  size?: 'sm' | 'md';
+}
+
+export default function DriverIdentity(props: DriverIdentityProps) {
+  const { driver, href, contextLabel, meta, size = 'md' } = props;
+
+  const avatarSize = size === 'sm' ? 40 : 48;
+  const nameTextClasses =
+    size === 'sm'
+      ? 'text-sm font-medium text-white'
+      : 'text-base md:text-lg font-semibold text-white';
+
+  const metaTextClasses = 'text-xs md:text-sm text-gray-400';
+
+  const content = (
+    <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
+      <div
+        className={`rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center shrink-0`}
+        style={{ width: avatarSize, height: avatarSize }}
+      >
+        <Image
+          src={getImageService().getDriverAvatar(driver.id)}
+          alt={driver.name}
+          width={avatarSize}
+          height={avatarSize}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={`${nameTextClasses} truncate`}>{driver.name}</span>
+          {contextLabel ? (
+            <span className="inline-flex items-center rounded-full bg-charcoal-outline/60 px-2 py-0.5 text-[10px] md:text-xs font-medium text-gray-200">
+              {contextLabel}
+            </span>
+          ) : null}
+        </div>
+        {meta ? <div className={`${metaTextClasses} mt-0.5 truncate`}>{meta}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">{content}</div>;
+}