From 72d2c8bbfec1d8ac5ae3bff2fef0d1499b92ed0c Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:49:36 +0700
Subject: [PATCH] feat: add CustomTooltip component and integrate it into
 navigation bar links

---
 src/components/customToolTip.tsx              | 22 +++++++++++
 .../navigationBar/AuthenticatedComponents.tsx | 37 +++++++++++--------
 2 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 src/components/customToolTip.tsx

diff --git a/src/components/customToolTip.tsx b/src/components/customToolTip.tsx
new file mode 100644
index 0000000..a2cb991
--- /dev/null
+++ b/src/components/customToolTip.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip";
+
+interface CustomTooltipProps {
+  message: string;
+  children: React.ReactNode;
+}
+
+const CustomTooltip: React.FC<CustomTooltipProps> = ({ message, children }) => {
+  return (
+    <TooltipProvider delayDuration={0.5}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent>
+          <p>{message}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default CustomTooltip;
diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 63e4345..b983426 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -13,6 +13,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Bell, Heart, Wallet, ChartPie } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
 import { useUserRole } from "@/hooks/useUserRole";
+import CustomTooltip from "../customToolTip";
 
 interface AuthenticatedComponentsProps {
   uid: string;
@@ -29,24 +30,30 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
 
   return (
     <div className={`flex gap-3 pl-2 items-center ${businessClass}`}>
-      <Link href={"/notification"}>
-        <div className="relative inline-block">
-          <Bell className="h-6 w-6 " />
-          <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">
-            {displayValue}
-          </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 animate-ping"></span>
-        </div>
-      </Link>
+      <CustomTooltip message="Notification">
+        <Link href={"/notification"}>
+          <div className="relative inline-block">
+            <Bell className="h-6 w-6 " />
+            <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">
+              {displayValue}
+            </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 animate-ping"></span>
+          </div>
+        </Link>
+      </CustomTooltip>
       <Heart />
-      <Link href={"/portfolio/" + uid}>
-        <Wallet className="cursor-pointer" />
-      </Link>
+      <CustomTooltip message="Portfolio">
+        <Link href={"/portfolio/" + uid}>
+          <Wallet className="cursor-pointer" />
+        </Link>
+      </CustomTooltip>
       {/*chart pie icon for bussiness's dashboard */}
       {data?.role === "business" && (
-        <Link href="/dashboard">
-          <ChartPie />
-        </Link>
+        <CustomTooltip message="Dashboard">
+          <Link href="/dashboard">
+            <ChartPie />
+          </Link>
+        </CustomTooltip>
       )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>