65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
|
|
export interface DriverIdentityProps {
|
|
driver: DriverViewModel;
|
|
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';
|
|
|
|
// Use provided avatar URL or fallback to default avatar path
|
|
const avatarUrl = driver.avatarUrl || `/api/media/avatar/${driver.id}`;
|
|
|
|
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={avatarUrl}
|
|
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>;
|
|
} |