Merge pull request #348 from syrok94/feature/add-tooltip-on-nav

feat: add tooltips on navbar
bryanlundberg · Oct 3, 2024 · df24827 · df24827
2 parents 230c01b + 6d37e0d
commit df24827
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -1,6 +1,7 @@
 {
   "Index": {
     "HomePage": {
+      "title":"Home",
       "hint": "Hint",
       "optimal-yellow-layer": "Optimal Yellow Layer",
       "solving": "Solving...",

diff --git a/src/components/navbar/NavItem.tsx b/src/components/navbar/NavItem.tsx
@@ -1,12 +1,14 @@
 import { Link, usePathname } from "@/i18n/routing";
 import { twMerge } from "tailwind-merge";
+import { InteractiveIcon } from "../timer/InteractiveIcon";
 
 interface NavItem {
   path: string;
   icon: React.ReactNode;
+  toolTipMessage:string;
 }
 
-export function NavItem({ path, icon }: NavItem) {
+export function NavItem({ path, icon , toolTipMessage}: NavItem) {
   const pathname = usePathname();
   return (
     <>
@@ -20,7 +22,11 @@ export function NavItem({ path, icon }: NavItem) {
             } transition duration-300 py-2 flex flex-col justify-center items-center font-medium  `
           )}
         >
-          {icon}
+          <InteractiveIcon
+              icon={icon}
+              animation={false}
+              message={toolTipMessage}
+            />
         </Link>
       </li>
     </>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -6,38 +6,46 @@ import {
   CubeIcon,
   StackIcon,
 } from "@radix-ui/react-icons";
-
-const navigation: Navigation = [
-  {
-    path: "/",
-    icon: <ClockIcon />,
-  },
-  {
-    path: "/solves",
-    icon: <StackIcon />,
-  },
-  {
-    path: "/stats",
-    icon: <BarChartIcon />,
-  },
-  {
-    path: "/cubes",
-    icon: <CubeIcon />,
-  },
-];
+import { useTranslations } from "next-intl";
 
 type Navigation = NavItem[];
 
 interface NavItem {
   path: string;
   icon: React.ReactNode;
+  toolTipMessage: string;
 }
 
 export default function Navbar() {
+
+  const t = useTranslations("Index");
+
+  const navigation: Navigation = [
+    {
+      path: "/",
+      icon: <ClockIcon />,
+      toolTipMessage: t("HomePage.title"),
+    },
+    {
+      path: "/solves",
+      icon: <StackIcon />,
+      toolTipMessage: t("SolvesPage.title"),
+    },
+    {
+      path: "/stats",
+      icon: <BarChartIcon />,
+      toolTipMessage: t("StatsPage.title"),
+    },
+    {
+      path: "/cubes",
+      icon: <CubeIcon />,
+      toolTipMessage: t("CubesPage.title"),
+    },
+  ];
   return (
     <NavContainer>
       {navigation.map((item: NavItem) => {
-        return <NavItem key={item.path} path={item.path} icon={item.icon} />;
+        return <NavItem key={item.path} path={item.path} icon={item.icon} toolTipMessage={item.toolTipMessage} />;
       })}
     </NavContainer>
   );