68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import { User } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Surface } from './Surface';
|
|
|
|
export interface AvatarProps {
|
|
src?: string;
|
|
alt?: string;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | number;
|
|
fallback?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const Avatar = ({
|
|
src,
|
|
alt,
|
|
size = 'md',
|
|
fallback,
|
|
className
|
|
}: AvatarProps) => {
|
|
const sizeMap: Record<string, string> = {
|
|
sm: '2rem',
|
|
md: '3rem',
|
|
lg: '4rem',
|
|
xl: '6rem'
|
|
};
|
|
|
|
const iconSizeMap: Record<string, number> = {
|
|
sm: 3,
|
|
md: 5,
|
|
lg: 8,
|
|
xl: 12
|
|
};
|
|
|
|
const finalSize = typeof size === 'number' ? `${size / 4}rem` : sizeMap[size];
|
|
const finalIconSize = typeof size === 'number' ? Math.round(size / 8) : iconSizeMap[size];
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="full"
|
|
className={className}
|
|
style={{
|
|
width: finalSize,
|
|
height: finalSize,
|
|
overflow: 'hidden',
|
|
border: '2px solid var(--ui-color-border-default)'
|
|
}}
|
|
>
|
|
{src ? (
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<Box center fullWidth fullHeight bg="var(--ui-color-bg-base)">
|
|
{fallback ? (
|
|
<span className="text-sm font-bold text-[var(--ui-color-text-med)]">{fallback}</span>
|
|
) : (
|
|
<Icon icon={User} size={finalIconSize as any} intent="low" />
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
};
|