ghost/apps/admin-x-activitypub/src/components/global/APAvatar.tsx

import NiceModal from '@ebay/nice-modal-react';
import React, {useEffect, useState} from 'react';
import ViewProfileModal from '../modals/ViewProfileModal';
import clsx from 'clsx';
import getUsername from '../../utils/get-username';
import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Icon} from '@tryghost/admin-x-design-system';

type AvatarSize = '2xs' | 'xs' | 'sm' | 'lg' | 'notification';

interface APAvatarProps {
    author: {
        icon: {
            url: string;
        };
        name: string;
    } | undefined;
    size?: AvatarSize;
}

const APAvatar: React.FC<APAvatarProps> = ({author, size}) => {
    let iconSize = 18;
    let containerClass = `shrink-0 items-center justify-center relative cursor-pointer z-10 flex ${size === 'lg' ? '' : 'hover:opacity-80'}`;
    let imageClass = 'z-10 rounded-md w-10 h-10 object-cover';
    const [iconUrl, setIconUrl] = useState(author?.icon?.url);

    useEffect(() => {
        setIconUrl(author?.icon?.url);
    }, [author?.icon?.url]);

    if (!author) {
        return null;
    }

    switch (size) {
    case '2xs':
        iconSize = 10;
        containerClass = clsx('h-4 w-4 rounded-md ', containerClass);
        imageClass = 'z-10 rounded-md w-4 h-4 object-cover';
        break;
    case 'xs':
        iconSize = 12;
        containerClass = clsx('h-6 w-6 rounded-md ', containerClass);
        imageClass = 'z-10 rounded-md w-6 h-6 object-cover';
        break;
    case 'notification':
        iconSize = 12;
        containerClass = clsx('h-9 w-9 rounded-md', containerClass);
        imageClass = 'z-10 rounded-xl w-9 h-9 object-cover';
        break;
    case 'sm':
        containerClass = clsx('h-10 w-10 rounded-md', containerClass);
        break;
    case 'lg':
        containerClass = clsx('h-22 w-22 rounded-xl', containerClass);
        imageClass = 'z-10 rounded-xl w-22 h-22 object-cover';
        break;
    default:
        containerClass = clsx('h-10 w-10 rounded-md', containerClass);
        break;
    }

    if (!iconUrl) {
        containerClass = clsx(containerClass, 'bg-grey-100');
    }

    const onClick = (e: React.MouseEvent) => {
        e.stopPropagation();
        NiceModal.show(ViewProfileModal, {
            profile: getUsername(author as ActorProperties)
        });
    };

    const title = `${author?.name} ${getUsername(author as ActorProperties)}`;

    if (iconUrl) {
        return (
            <div
                className={containerClass}
                title={title}
                onClick={onClick}
            >
                <img
                    className={imageClass}
                    src={iconUrl}
                    onError={() => setIconUrl(undefined)}
                />
            </div>
        );
    }

    return (
        <div
            className={containerClass}
            title={title}
            onClick={onClick}
        >
            <Icon
                colorClass='text-grey-600'
                name='user'
                size={iconSize}
            />
        </div>
    );
};

export default APAvatar;