sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-18 21:44:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add CustomTooltip component and integrate it into navigation bar links

Browse Source
This commit is contained in:
Pattadon 2024-11-11 11:49:36 +07:00
parent d6a11581a1
commit 72d2c8bbfe
2 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/customToolTip.tsx Normal file
View File

@ -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;

37
src/components/navigationBar/AuthenticatedComponents.tsx
View File

@ -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>