From 6e70bdf0846dce2ad420af576f52882e28978c1a Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Tue, 12 Nov 2024 09:37:45 +0700
Subject: [PATCH] feat: replace Tooltip with CustomTooltip in
 FollowShareButtons; pass projectName as prop

---
 .../deals/[id]/followShareButton.tsx           | 18 ++++++------------
 src/app/(investment)/deals/[id]/page.tsx       |  2 +-
 src/app/portfolio/[uid]/page.tsx               |  1 +
 .../navigationBar/AuthenticatedComponents.tsx  |  9 ++++++---
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/followShareButton.tsx b/src/app/(investment)/deals/[id]/followShareButton.tsx
index 5a2c8de..f6bb4b8 100644
--- a/src/app/(investment)/deals/[id]/followShareButton.tsx
+++ b/src/app/(investment)/deals/[id]/followShareButton.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable */
 
 import { useState, useEffect } from "react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import CustomTooltip from "@/components/customToolTip";
 import { ShareIcon, StarIcon } from "lucide-react";
 import { deleteFollow, getFollow, insertFollow } from "@/lib/data/followQuery";
 import toast from "react-hot-toast";
@@ -13,9 +13,10 @@ import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 interface FollowShareButtons {
   userId: string;
   projectId: number;
+  projectName: string;
 }
 
-const FollowShareButtons = ({ userId, projectId }: FollowShareButtons) => {
+const FollowShareButtons = ({ userId, projectId, projectName }: FollowShareButtons) => {
   const supabase = createSupabaseClient();
   const { data: follow, isLoading: followIsLoading } = useQuery(getFollow(supabase, userId, projectId), {
     staleTime: 0,
@@ -71,16 +72,9 @@ const FollowShareButtons = ({ userId, projectId }: FollowShareButtons) => {
   return (
     <div className="grid grid-cols-2 gap-5 justify-self-end ">
       <div className="mt-2 cursor-pointer" onClick={handleFollow}>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <StarIcon id="follow" fill={isFollowState ? "#fcb30e" : "#fff"} strokeWidth={2} />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Follow NVIDIA</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <CustomTooltip message={`Follow ${projectName}`}>
+          <StarIcon id="follow" fill={isFollowState ? "#fcb30e" : "#fff"} strokeWidth={2} />
+        </CustomTooltip>
       </div>
       <div onClick={handleShare} className="cursor-pointer mt-2">
         <ShareIcon />
diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 73ef4be..cdb057c 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -89,7 +89,7 @@ export default async function ProjectDealPage({ params }: { params: { id: number
               <Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
               <h1 className="mt-3 font-bold  text-lg md:text-3xl">{projectData?.project_name}</h1>
             </span>
-            <FollowShareButtons userId={user!.user.id} projectId={params.id} />
+            <FollowShareButtons userId={user!.user.id} projectId={params.id} projectName ={projectData?.project_name}/>
           </div>
           {/* end of pack */}
           <p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>
diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 3eebeec..5531e8f 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -26,6 +26,7 @@ import { UnAuthorizedAlert } from "@/components/alert/unauthorized/alert";
 import Link from "next/link";
 import { DataTable } from "@/components/dataTable";
 import { Button } from "@/components/ui/button";
+import CustomTooltip from "@/components/customToolTip";
 
 export default async function Portfolio({ params }: { params: { uid: string } }) {
   const supabase = createSupabaseClient();
diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index c2d45b3..1a9a004 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -34,9 +34,12 @@ export const AuthenticatedComponents = ({ uid, avatarUrl, notificationCount }: A
           <div className="relative inline-block">
             <Bell className="h-6 w-6 " />
             {notificationCount >= 1 && (
-              <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
-                {notificationCount}
-              </span>
+              <div>
+                <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping"></span>
+                <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full  ">
+                  {notificationCount}
+                </span>
+              </div>
             )}
           </div>
         </Link>