52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { User } from 'lucide-react';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface AvatarProps {
|
|
driverId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
border?: boolean;
|
|
}
|
|
|
|
export function Avatar({
|
|
driverId,
|
|
src,
|
|
alt,
|
|
size = 40,
|
|
className = '',
|
|
border = true,
|
|
}: AvatarProps) {
|
|
const avatarSrc = src || (driverId ? `/media/avatar/${driverId}` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
bg="bg-charcoal-outline/20"
|
|
border={border}
|
|
borderColor="border-charcoal-outline/50"
|
|
className={className}
|
|
style={{ width: size, height: size, flexShrink: 0 }}
|
|
>
|
|
{avatarSrc ? (
|
|
<Image
|
|
src={avatarSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-cover"
|
|
fallbackSrc="/default-avatar.png"
|
|
/>
|
|
) : (
|
|
<Icon icon={User} size={size > 32 ? 5 : 4} color="text-gray-500" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|