feat: add team member tooltip

src/components/Dashboard/DashboardPage.tsx

@@ -44,9 +44,10 @@ export function DashboardPage(props: DashboardPageProps) {
     getAllTeams().finally(() => setIsLoading(false));
   }, []);
 
-  const userAvatar = currentUser?.avatar
+  const userAvatar =
-    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
+    currentUser?.avatar && !isLoading
-    : '/images/default-avatar.png';
+      ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
+      : '/images/default-avatar.png';
 
   return (
     <div className="container min-h-screen pb-20 pt-8">

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}
-                <img
+                    alt={member.name || ''}
-                  src={avatar}
+                    className="absolute inset-0 h-full w-full object-cover"
-                  alt={member.name || ''}
+                  />
-                  className="absolute inset-0 h-full w-full object-cover"
+                </figure>
-                />
+                <Tooltip position="top-center" additionalClass="text-sm">
-                <figcaption className="sr-only">{member.name}</figcaption>
+                  {member.name}
-              </figure>
+                </Tooltip>
+              </span>
             );
           })}
         </div>