feat: accessible avatars on mobile

Author: canerakdas

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

@@ -1,9 +1,11 @@
 .item {
-  @apply flex
+  @apply xs:max-h-10
+    xs:max-w-10
+    flex
     h-full
-    max-h-10
+    max-h-12
     w-full
-    max-w-10
+    max-w-12
     items-center
     justify-center
     rounded-full
@@ -19,18 +21,27 @@
 }
 
 .avatar {
-  @apply -ml-2
+  @apply xs:-ml-2
+    ml-0.5
     size-8
     flex-shrink-0
     first:ml-0;
 
-  &:hover {
-    @apply z-10;
+  .wrapper {
+    @apply max-xs:block
+      max-xs:py-0;
   }
 }
 
 .small {
-  @apply size-8;
+  @apply xs:size-8
+    size-12;
+
+  .clickable {
+    @apply xs:border-white
+      xs:dark:border-neutral-950
+      border-green-500;
+  }
 }
 
 .medium {

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

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import type { ComponentPropsWithoutRef, ElementRef } from 'react';
 import { forwardRef } from 'react';
 
+import Link from '@/components/Link';
+
 import styles from './index.module.css';
 
 export type AvatarProps = {
@@ -11,30 +13,47 @@ export type AvatarProps = {
   nickname: string;
   fallback?: string;
   size?: 'small' | 'medium';
+  website?: string;
 };
 
 const Avatar = forwardRef<
   ElementRef<typeof RadixAvatar.Root>,
   ComponentPropsWithoutRef<typeof RadixAvatar.Root> & AvatarProps
->(({ image, name, fallback, size = 'small', ...props }, ref) => (
-  <RadixAvatar.Root
-    {...props}
-    className={classNames(styles.avatar, styles[size], props.className)}
-    ref={ref}
-  >
-    <RadixAvatar.Image
-      loading="lazy"
-      src={image}
-      alt={name}
-      className={styles.item}
-    />
-    <RadixAvatar.Fallback
-      delayMs={500}
-      className={classNames(styles.item, styles[size])}
-    >
-      {fallback}
-    </RadixAvatar.Fallback>
-  </RadixAvatar.Root>
-));
+>(
+  (
+    { image, nickname, name, fallback, website, size = 'small', ...props },
+    ref
+  ) => {
+    const Wrapper = website ? Link : 'div';
+
+    return (
+      <RadixAvatar.Root
+        {...props}
+        className={classNames(styles.avatar, styles[size], props.className)}
+        ref={ref}
+      >
+        <Wrapper
+          {...(website ? { href: website, target: '_blank' } : {})}
+          className={styles.wrapper}
+        >
+          <RadixAvatar.Image
+            loading="lazy"
+            src={image}
+            alt={name || nickname}
+            className={classNames(styles.item, {
+              [styles.clickable]: website,
+            })}
+          />
+          <RadixAvatar.Fallback
+            delayMs={500}
+            className={classNames(styles.item, styles[size])}
+          >
+            {fallback}
+          </RadixAvatar.Fallback>
+        </Wrapper>
+      </RadixAvatar.Root>
+    );
+  }
+);
 
 export default Avatar;

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

@@ -34,13 +34,10 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
 
   return (
     <div className={styles.avatarGroup}>
-      {renderAvatars.map(({ website, ...avatar }) => (
+      {renderAvatars.map(({ ...avatar }) => (
         <Fragment key={avatar.nickname}>
-          {website ? (
-            <Tooltip
-              content={<AvatarOverlay {...avatar} website={website} />}
-              asChild
-            >
+          {avatar.website ? (
+            <Tooltip content={<AvatarOverlay {...avatar} />} asChild>
               <Avatar {...avatar} size={size} className="cursor-pointer" />
             </Tooltip>
           ) : (
@@ -51,7 +48,11 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
       {avatars.length > limit && (
         <span
           onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
-          className={classNames(avatarstyles.avatar, 'cursor-pointer')}
+          className={classNames(
+            avatarstyles.avatar,
+            avatarstyles[size],
+            'cursor-pointer'
+          )}
         >
           <span className={avatarstyles.item}>
             {`${showMore ? '-' : '+'}${avatars.length - limit}`}