42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
'use client';
|
|
|
|
const getImageUrl = (imageKey) => {
|
|
if (!imageKey) return null;
|
|
return `/zen/api/storage/${imageKey}`;
|
|
};
|
|
|
|
const getUserInitials = (name) => {
|
|
if (!name) return 'U';
|
|
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
};
|
|
|
|
const sizeMap = {
|
|
sm: { wrapper: 'w-[26px] h-[26px]', text: 'text-[10px]' },
|
|
md: { wrapper: 'w-8 h-8', text: 'text-[11px]' },
|
|
lg: { wrapper: 'w-16 h-16', text: 'text-xl' },
|
|
xl: { wrapper: 'w-24 h-24', text: 'text-2xl' },
|
|
};
|
|
|
|
const UserAvatar = ({ user, size = 'md' }) => {
|
|
const imageUrl = getImageUrl(user?.image);
|
|
const initials = getUserInitials(user?.name);
|
|
const { wrapper, text } = sizeMap[size] ?? sizeMap.md;
|
|
|
|
if (imageUrl) {
|
|
return (
|
|
<img
|
|
src={imageUrl}
|
|
alt={user?.name || 'User'}
|
|
className={`${wrapper} rounded-full object-cover shrink-0`}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<div className={`${wrapper} rounded-full bg-black dark:bg-white flex items-center justify-center shrink-0`}>
|
|
<span className={`${text} font-medium text-white dark:text-black`}>{initials}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserAvatar;
|