83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { PlaceholderImage } from './PlaceholderImage';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Badge } from './Badge';
|
|
|
|
export interface DriverIdentityProps {
|
|
driver: {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string | null;
|
|
};
|
|
href?: string;
|
|
contextLabel?: React.ReactNode;
|
|
meta?: React.ReactNode;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export function DriverIdentity(props: DriverIdentityProps) {
|
|
const { driver, href, contextLabel, meta, size = 'md' } = props;
|
|
|
|
const avatarSize = size === 'sm' ? 40 : 48;
|
|
const nameSize = size === 'sm' ? 'sm' : 'base';
|
|
|
|
const avatarUrl = driver.avatarUrl;
|
|
|
|
const content = (
|
|
<Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">
|
|
<Box
|
|
rounded="full"
|
|
bg="bg-primary-blue/20"
|
|
overflow="hidden"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexShrink={0}
|
|
style={{ width: avatarSize, height: avatarSize }}
|
|
>
|
|
{avatarUrl ? (
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={driver.name}
|
|
width={avatarSize}
|
|
height={avatarSize}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={avatarSize} />
|
|
)}
|
|
</Box>
|
|
|
|
<Box flexGrow={1} minWidth="0">
|
|
<Box display="flex" alignItems="center" gap={2} minWidth="0">
|
|
<Text size={nameSize} weight="medium" color="text-white" className="truncate">
|
|
{driver.name}
|
|
</Text>
|
|
{contextLabel && (
|
|
<Badge variant="default" className="bg-charcoal-outline/60 text-[10px] md:text-xs">
|
|
{contextLabel}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
{meta && (
|
|
<Text size="xs" color="text-gray-400" mt={0.5} className="truncate" block>
|
|
{meta}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">{content}</Box>;
|
|
}
|