fix: avatar rendering and avatar group margins

Author: ovflowd

apps/site/components/Common/AvatarGroup/Avatar/index.module.css

@@ -10,12 +10,11 @@
     justify-center
     rounded-full
     border-2
-    border-white
+    border-transparent
     bg-neutral-100
     object-cover
     text-xs
     text-neutral-800
-    dark:border-neutral-950
     dark:bg-neutral-900
     dark:text-neutral-300;
 }

apps/site/components/Common/AvatarGroup/Avatar/index.tsx

@@ -1,7 +1,6 @@
-import * as RadixAvatar from '@radix-ui/react-avatar';
 import classNames from 'classnames';
-import type { ComponentPropsWithoutRef, ElementRef } from 'react';
-import { forwardRef } from 'react';
+import Image from 'next/image';
+import type { FC, HTMLAttributes } from 'react';
 
 import Link from '@/components/Link';
 
@@ -16,38 +15,47 @@ export type AvatarProps = {
   url?: string;
 };
 
-const Avatar = forwardRef<
-  ElementRef<typeof RadixAvatar.Root>,
-  ComponentPropsWithoutRef<typeof RadixAvatar.Root> & AvatarProps
->(({ image, nickname, name, fallback, url, size = 'small', ...props }, ref) => {
+const Avatar: FC<HTMLAttributes<HTMLSpanElement> & AvatarProps> = ({
+  image,
+  nickname,
+  name,
+  fallback,
+  url,
+  size = 'small',
+  ...props
+}) => {
   const Wrapper = url ? Link : 'div';
 
   return (
-    <RadixAvatar.Root
+    <span
       {...props}
       className={classNames(styles.avatar, styles[size], props.className)}
-      ref={ref}
     >
       <Wrapper
         href={url || undefined}
         target={url ? '_blank' : undefined}
         className={styles.wrapper}
       >
-        <RadixAvatar.Image
-          loading="lazy"
-          src={image}
-          alt={name || nickname}
-          className={styles.item}
-        />
-        <RadixAvatar.Fallback
-          delayMs={500}
-          className={classNames(styles.item, styles[size])}
-        >
-          {fallback}
-        </RadixAvatar.Fallback>
+        {image && (
+          <Image
+            width={40}
+            height={40}
+            loading="lazy"
+            decoding="async"
+            src={image}
+            alt={name || nickname}
+            className={styles.item}
+          />
+        )}
+
+        {!image && (
+          <span className={classNames(styles.item, styles[size])}>
+            {fallback}
+          </span>
+        )}
       </Wrapper>
-    </RadixAvatar.Root>
+    </span>
   );
-});
+};
 
 export default Avatar;

apps/site/components/Common/AvatarGroup/Overlay/index.tsx

@@ -25,6 +25,7 @@ const AvatarOverlay: FC<AvatarOverlayProps> = ({
       fallback={fallback}
       size="medium"
     />
+
     <div className={styles.user}>
       {name && <div className={styles.name}>{name}</div>}
       {nickname && <div className={styles.nickname}>{nickname}</div>}

apps/site/components/Common/AvatarGroup/index.module.css

@@ -2,13 +2,22 @@
   @apply flex
     flex-wrap
     items-center;
+
+  &:not(.expandable) {
+    > span {
+      @apply ml-0;
+    }
+  }
 }
 
 .small {
-  @apply xs:-space-x-2
-    space-x-0.5;
+  > span {
+    @apply -ml-2;
+  }
 }
 
 .medium {
-  @apply -space-x-2.5;
+  > span {
+    @apply -ml-2.5;
+  }
 }

apps/site/components/Common/AvatarGroup/index.tsx

@@ -35,7 +35,11 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
   );
 
   return (
-    <div className={classNames(styles.avatarGroup, styles[size])}>
+    <div
+      className={classNames(styles.avatarGroup, styles[size], {
+        [styles.expandable]: avatars.length > limit,
+      })}
+    >
       {renderAvatars.map(({ ...avatar }) => (
         <Fragment key={avatar.nickname}>
           <Tooltip
@@ -54,6 +58,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
           </Tooltip>
         </Fragment>
       ))}
+
       {avatars.length > limit && (
         <span
           onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}

apps/site/components/withAvatarGroup.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { ComponentProps, FC } from 'react';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';

apps/site/components/withMetaBar.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { useFormatter } from 'next-intl';
 import type { FC } from 'react';
 

apps/site/layouts/Post.tsx

@@ -29,7 +29,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
             <h1>{frontmatter.title}</h1>
 
             <section>
-              <WithAvatarGroup names={authors} />
+              <WithAvatarGroup names={authors} size="medium" />
 
               <p>{authors.join(', ')}</p>
             </section>

apps/site/next.config.mjs

@@ -21,6 +21,12 @@ const nextConfig = {
     // We add it to the remote pattern for the static images we use from multiple sources
     // to be marked as safe sources (these come from Markdown files)
     remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
       {
         protocol: 'https',
         hostname: 'bestpractices.coreinfrastructure.org',
@@ -76,7 +82,6 @@ const nextConfig = {
     // @see https://vercel.com/blog/how-we-optimized-package-imports-in-next-js
     optimizePackageImports: [
       '@radix-ui/react-accessible-icon',
-      '@radix-ui/react-avatar',
       '@radix-ui/react-dropdown-menu',
       '@radix-ui/react-label',
       '@radix-ui/react-scroll-area',
@@ -86,6 +91,7 @@ const nextConfig = {
       '@radix-ui/react-toast',
       '@radix-ui/react-tooltip',
       '@orama/highlight',
+      '@orama/react-components',
       '@heroicons/react',
       'tailwindcss',
       'shiki',

apps/site/package.json

@@ -30,7 +30,6 @@
     "@orama/react-components": "^0.1.23",
     "@oramacloud/client": "^2.1.4",
     "@radix-ui/react-accessible-icon": "^1.1.0",
-    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-scroll-area": "^1.2.1",