45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Image } from './Image';
|
|
import { Surface } from './primitives/Surface';
|
|
|
|
interface AvatarProps {
|
|
src?: string | null;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function Avatar({ src, alt, size = 40, className = '' }: AvatarProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="full"
|
|
border
|
|
borderColor="border-charcoal-outline/50"
|
|
className={className}
|
|
w={`${size}px`}
|
|
h={`${size}px`}
|
|
flexShrink={0}
|
|
overflow="hidden"
|
|
>
|
|
{src ? (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
fullWidth
|
|
fullHeight
|
|
className="object-cover"
|
|
fallbackSrc="/default-avatar.png"
|
|
/>
|
|
) : (
|
|
<Box fullWidth fullHeight bg="bg-charcoal-outline" display="flex" center>
|
|
<span className="text-gray-400 font-bold" style={{ fontSize: size * 0.4 }}>
|
|
{alt.charAt(0).toUpperCase()}
|
|
</span>
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|