Added support for badges to APAvatar

ref https://linear.app/tryghost/issue/AP-283/handle-incoming-likes

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

@@ -3,16 +3,29 @@ import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
 import {Icon} from '@tryghost/admin-x-design-system';
 
 type AvatarSize = 'xs' | 'sm' | 'lg';
+export type AvatarBadge = 'user-fill' | 'heart-fill' | undefined;
 
 interface APAvatarProps {
     author?: ActorProperties;
     size?: AvatarSize;
+    badge?: AvatarBadge;
 }
 
-const APAvatar: React.FC<APAvatarProps> = ({author, size}) => {
+const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
     let iconSize = 18;
     let containerClass = '';
     let imageClass = 'z-10 rounded w-10 h-10';
+    const badgeClass = `w-6 h-6 rounded-full absolute -bottom-2 -right-2 border-2 border-white content-box flex items-center justify-center `;
+    let badgeColor = '';
+
+    switch (badge) {
+    case 'user-fill':
+        badgeColor = ' bg-blue-500';
+        break;
+    case 'heart-fill':
+        badgeColor = ' bg-red-500';
+        break;
+    }
     
     switch (size) {
     case 'xs':
@@ -33,7 +46,31 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size}) => {
 
     return (
         <>
-            {author && author!.icon?.url ? <img className={imageClass} src={author!.icon?.url}/> : <div className={containerClass}><Icon colorClass='text-grey-600' name='user' size={iconSize} /></div>}
+            {author && author.icon?.url ? (
+                <div className='relative'>
+                    <img 
+                        className={imageClass} 
+                        src={author.icon.url}
+                    />
+                    {badge && (
+                        <div className={`${badgeClass} ${badgeColor}`}>
+                            <Icon
+                                colorClass='text-white'
+                                name={badge} 
+                                size='xs'
+                            />
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div className={containerClass}>
+                    <Icon 
+                        colorClass='text-grey-600' 
+                        name='user' 
+                        size={iconSize} 
+                    />
+                </div>
+            )}
         </>
     );
 };

apps/admin-x-design-system/src/assets/icons/heart-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Hearts-Card--Streamline-Ultimate.svg" height="24" width="24"><desc>Hearts Card Streamline Icon: https://streamlinehq.com</desc><path fill="currentColor" fill-rule="evenodd" d="M7.284 2.513a6.376 6.376 0 0 0 -4.146 11.22l8.014 7.42a1.25 1.25 0 0 0 1.698 0l8.024 -7.43A6.376 6.376 0 1 0 12 4.599a6.36 6.36 0 0 0 -4.716 -2.086Z" clip-rule="evenodd" stroke-width="1"></path></svg>

apps/admin-x-design-system/src/assets/icons/user-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Single-Neutral-Actions--Streamline-Ultimate.svg" height="24" width="24"><desc>Single Neutral Actions Streamline Icon: https://streamlinehq.com</desc><g><path d="M5.9611 6.2789C5.9611 10.9277 10.9935 13.8332 15.0195 11.5088C16.8879 10.43 18.0389 8.4364 18.0389 6.2789C18.0389 1.6302 13.0065 -1.2753 8.9805 1.0491C7.1121 2.1278 5.9611 4.1214 5.9611 6.2789" fill="currentColor" stroke-width="1"></path><path d="M12 13.5892C6.7337 13.589 2.4649 17.8581 2.4649 23.1243C2.4649 23.4754 2.7495 23.76 3.1005 23.76H20.8995C21.2505 23.76 21.5351 23.4754 21.5351 23.1243C21.5351 17.8581 17.2663 13.589 12 13.5892Z" fill="currentColor" stroke-width="1"></path></g></svg>