84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import DriverRating from '@/components/profile/DriverRatingPill';
|
|
import { PlaceholderImage } from '@/ui/PlaceholderImage';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
export interface DriverSummaryPillProps {
|
|
driver: DriverViewModel;
|
|
rating: number | null;
|
|
rank: number | null;
|
|
avatarSrc?: string | null;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
}
|
|
|
|
export function DriverSummaryPill(props: DriverSummaryPillProps) {
|
|
const { driver, rating, rank, avatarSrc, onClick, href } = props;
|
|
|
|
const resolvedAvatar = avatarSrc;
|
|
|
|
const content = (
|
|
<>
|
|
<Box width={8} height={8} rounded="full" className="overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
|
{resolvedAvatar ? (
|
|
<Image
|
|
src={resolvedAvatar}
|
|
alt={driver.name}
|
|
width={32}
|
|
height={32}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={32} />
|
|
)}
|
|
</Box>
|
|
|
|
<Stack direction="col" align="start" justify="center" className="leading-tight">
|
|
<Text size="xs" weight="semibold" color="text-white" className="truncate max-w-[140px]" block>
|
|
{driver.name}
|
|
</Text>
|
|
|
|
<DriverRating rating={rating} rank={rank} />
|
|
</Stack>
|
|
</>
|
|
);
|
|
|
|
const baseClasses = "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";
|
|
|
|
if (href) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={baseClasses}
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (onClick) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={baseClasses}
|
|
>
|
|
{content}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80">
|
|
{content}
|
|
</Box>
|
|
);
|
|
}
|