From 7d5cbd87dbe691a860aed06ba5740d8f192f9e0b Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 30 Aug 2024 01:43:12 +0600
Subject: [PATCH] feat: add team member tooltip

---
 src/components/Dashboard/DashboardPage.tsx |  7 ++++---
 src/components/Dashboard/TeamDashboard.tsx | 24 ++++++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/Dashboard/DashboardPage.tsx b/src/components/Dashboard/DashboardPage.tsx
index e03829635..9801283cd 100644
--- a/src/components/Dashboard/DashboardPage.tsx
+++ b/src/components/Dashboard/DashboardPage.tsx
@@ -44,9 +44,10 @@ export function DashboardPage(props: DashboardPageProps) {
     getAllTeams().finally(() => setIsLoading(false));
   }, []);
 
-  const userAvatar = currentUser?.avatar
-    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
-    : '/images/default-avatar.png';
+  const userAvatar =
+    currentUser?.avatar && !isLoading
+      ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser.avatar}`
+      : '/images/default-avatar.png';
 
   return (
     <div className="container min-h-screen pb-20 pt-8">
diff --git a/src/components/Dashboard/TeamDashboard.tsx b/src/components/Dashboard/TeamDashboard.tsx
index 1f9e617b8..c006703db 100644
--- a/src/components/Dashboard/TeamDashboard.tsx
+++ b/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
-                key={member.email}
-                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>
+              <span className="group relative" key={member.email}>
+                <figure 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"
+                  />
+                </figure>
+                <Tooltip position="top-center" additionalClass="text-sm">
+                  {member.name}
+                </Tooltip>
+              </span>
             );
           })}
         </div>