feat: add team member tooltip

src/components/Dashboard/DashboardPage.tsx

@@ -44,7 +44,8 @@ export function DashboardPage(props: DashboardPageProps) {
     getAllTeams().finally(() => setIsLoading(false));
   }, []);
 
-  const userAvatar = currentUser?.avatar
+  const userAvatar =
+    currentUser?.avatar && !isLoading
       ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
       : '/images/default-avatar.png';
 

src/components/Dashboard/TeamDashboard.tsx

@@ -7,6 +7,7 @@ import { LoadingProgress } from './LoadingProgress';
 import { ResourceProgress } from '../Activity/ResourceProgress';
 import { TeamActivityPage } from '../TeamActivity/TeamActivityPage';
 import { cn } from '../../lib/classname';
+import { Tooltip } from '../Tooltip';
 
 type TeamDashboardProps = {
   teamId: string;
@@ -120,17 +121,18 @@ export function TeamDashboard(props: TeamDashboardProps) {
               ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
               : '/images/default-avatar.png';
             return (
-              <figure
+              <span className="group relative" key={member.email}>
-                key={member.email}
+                <figure className="relative aspect-square size-8 overflow-hidden rounded-md bg-gray-100">
-                className="relative aspect-square size-8 overflow-hidden rounded-md bg-gray-100"
-              >
                   <img
                     src={avatar}
                     alt={member.name || ''}
                     className="absolute inset-0 h-full w-full object-cover"
                   />
-                <figcaption className="sr-only">{member.name}</figcaption>
                 </figure>
+                <Tooltip position="top-center" additionalClass="text-sm">
+                  {member.name}
+                </Tooltip>
+              </span>
             );
           })}
         </div>