sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54: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 { Bell, Heart, Wallet, ChartPie } from "lucide-react";
import { LogoutButton } from "@/components/auth/logoutButton"; import { LogoutButton } from "@/components/auth/logoutButton";
import { useUserRole } from "@/hooks/useUserRole"; import { useUserRole } from "@/hooks/useUserRole";
import CustomTooltip from "../customToolTip";
interface AuthenticatedComponentsProps { interface AuthenticatedComponentsProps {
uid: string; uid: string;
@ -29,24 +30,30 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
return ( return (
<div className={`flex gap-3 pl-2 items-center ${businessClass}`}> <div className={`flex gap-3 pl-2 items-center ${businessClass}`}>
<Link href={"/notification"}> <CustomTooltip message="Notification">
<div className="relative inline-block"> <Link href={"/notification"}>
<Bell className="h-6 w-6 " /> <div className="relative inline-block">
<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"> <Bell className="h-6 w-6 " />
{displayValue} <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">
</span> {displayValue}
<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>
</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>
</Link> </div>
</Link>
</CustomTooltip>
<Heart /> <Heart />
<Link href={"/portfolio/" + uid}> <CustomTooltip message="Portfolio">
<Wallet className="cursor-pointer" /> <Link href={"/portfolio/" + uid}>
</Link> <Wallet className="cursor-pointer" />
</Link>
</CustomTooltip>
{/*chart pie icon for bussiness's dashboard */} {/*chart pie icon for bussiness's dashboard */}
{data?.role === "business" && ( {data?.role === "business" && (
<Link href="/dashboard"> <CustomTooltip message="Dashboard">
<ChartPie /> <Link href="/dashboard">
</Link> <ChartPie />
</Link>
</CustomTooltip>
)} )}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>