61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { Avatar } from '@/ui/Avatar';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Box } from '@/ui/Box';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import React from 'react';
|
|
|
|
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({ driver, href, contextLabel, meta, size = 'md' }: DriverIdentityProps) {
|
|
const nameSize = size === 'sm' ? 'sm' : 'base';
|
|
|
|
const content = (
|
|
<Box display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">
|
|
<Avatar
|
|
src={driver.avatarUrl || undefined}
|
|
alt={driver.name}
|
|
size={size === 'sm' ? 'sm' : 'md'}
|
|
/>
|
|
|
|
<Box flex={1} minWidth="0">
|
|
<Box display="flex" alignItems="center" gap={2} minWidth="0">
|
|
<Text size={nameSize as any} weight="medium" variant="high" truncate>
|
|
{driver.name}
|
|
</Text>
|
|
{contextLabel && (
|
|
<Badge variant="default" size="sm">
|
|
{contextLabel}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
{meta && (
|
|
<Text size="xs" variant="low" block truncate>
|
|
{meta}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} block variant="inherit" underline="none">
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <Box display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">{content}</Box>;
|
|
}
|