add tooltip to friends button

src/components/Navbar.tsx

@@ -11,6 +11,7 @@ import {
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import Avatar from "./Avatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
 import { Card } from "./ui/card";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
@@ -23,10 +24,9 @@ interface ButtonProps {
 
 function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
   return (
-    <div className="group">
     <a
       aria-label={ariaLabel}
-        className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[10px] transition-all hover:cursor-pointer hover:bg-blue-500"
+      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
       href={href}
     >
       <>
@@ -34,31 +34,13 @@ function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
         <p className="hidden md:block">{text}</p>
       </>
     </a>
-    </div>
   );
 }
 
-export default function Navbar() {
+function FriendsButton() {
   const settingsStore = useStore(useSettingsStore, (state) => state);
 
   return (
-    <>
-      <Card className="flex h-fit w-full rounded-md">
-        {settingsStore !== undefined && settingsStore.player && (
-          <NavbarButton
-            ariaLabel="Your profile"
-            text="You"
-            icon={
-              <Avatar
-                url={settingsStore.player.profilePicture}
-                label="Your avatar"
-                size={32}
-              />
-            }
-            href={`/player/${settingsStore.player.id}/top/1`}
-          />
-        )}
-
     <Popover>
       <PopoverTrigger>
         <NavbarButton
@@ -95,6 +77,37 @@ export default function Navbar() {
         )}
       </PopoverContent>
     </Popover>
+  );
+}
+
+export default function Navbar() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  return (
+    <>
+      <Card className="flex h-fit w-full rounded-md">
+        {settingsStore !== undefined && settingsStore.player && (
+          <NavbarButton
+            ariaLabel="Your profile"
+            text="You"
+            icon={
+              <Avatar
+                url={settingsStore.player.profilePicture}
+                label="Your avatar"
+                size={32}
+              />
+            }
+            href={`/player/${settingsStore.player.id}/top/1`}
+          />
+        )}
+
+        <Tooltip>
+          <TooltipTrigger>
+            <FriendsButton />
+          </TooltipTrigger>
+          <TooltipContent>Click to view your friends</TooltipContent>
+        </Tooltip>
+
         <NavbarButton
           ariaLabel="View the global ranking"
           text="Ranking"

src/components/ui/Tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}