From 47b11dc25a53d7acda9a18219529d76f8479550c Mon Sep 17 00:00:00 2001
From: Bobby <bobbypatel94@gmail.com>
Date: Wed, 2 Oct 2024 13:48:35 +0530
Subject: [PATCH 1/2] feat/added tooltip on navbar

---
 messages/en.json                  |  1 +
 src/components/navbar/NavItem.tsx | 12 ++++++++++--
 src/components/navbar/Navbar.tsx  |  7 ++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 1157ca8d..eb37068a 100644
--- 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
index 984948c9..8a431a13 100644
--- a/src/components/navbar/NavItem.tsx
+++ b/src/components/navbar/NavItem.tsx
@@ -1,13 +1,17 @@
 import { Link, usePathname } from "@/i18n/routing";
 import { twMerge } from "tailwind-merge";
+import { InteractiveIcon } from "../timer/InteractiveIcon";
+import { useTranslations } from "next-intl";
 
 interface NavItem {
   path: string;
   icon: React.ReactNode;
+  toolTipMessage:any;
 }
 
-export function NavItem({ path, icon }: NavItem) {
+export function NavItem({ path, icon , toolTipMessage}: NavItem) {
   const pathname = usePathname();
+  const t = useTranslations();
   return (
     <>
       <li className="grow first:rounded-s-md last:rounded-e-md overflow-hidden">
@@ -20,7 +24,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={t(toolTipMessage)}
+            />
         </Link>
       </li>
     </>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index f6e7a688..84ef7ac5 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -11,18 +11,22 @@ const navigation: Navigation = [
   {
     path: "/",
     icon: <ClockIcon />,
+    toolTipMessage: "Index.HomePage.title",
   },
   {
     path: "/solves",
     icon: <StackIcon />,
+    toolTipMessage: "Index.SolvesPage.title",
   },
   {
     path: "/stats",
     icon: <BarChartIcon />,
+    toolTipMessage: "Index.StatsPage.title",
   },
   {
     path: "/cubes",
     icon: <CubeIcon />,
+    toolTipMessage: "Index.CubesPage.title",
   },
 ];
 
@@ -31,13 +35,14 @@ type Navigation = NavItem[];
 interface NavItem {
   path: string;
   icon: React.ReactNode;
+  toolTipMessage: string;
 }
 
 export default function Navbar() {
   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>
   );

From 6d37e0d7c009d9ff3ea7df25a056c61738dafa12 Mon Sep 17 00:00:00 2001
From: Bobby <bobbypatel94@gmail.com>
Date: Thu, 3 Oct 2024 12:53:52 +0530
Subject: [PATCH 2/2] fix changes suggested

---
 src/components/navbar/NavItem.tsx |  6 ++--
 src/components/navbar/Navbar.tsx  | 49 ++++++++++++++++---------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/components/navbar/NavItem.tsx b/src/components/navbar/NavItem.tsx
index 8a431a13..0e47566d 100644
--- a/src/components/navbar/NavItem.tsx
+++ b/src/components/navbar/NavItem.tsx
@@ -1,17 +1,15 @@
 import { Link, usePathname } from "@/i18n/routing";
 import { twMerge } from "tailwind-merge";
 import { InteractiveIcon } from "../timer/InteractiveIcon";
-import { useTranslations } from "next-intl";
 
 interface NavItem {
   path: string;
   icon: React.ReactNode;
-  toolTipMessage:any;
+  toolTipMessage:string;
 }
 
 export function NavItem({ path, icon , toolTipMessage}: NavItem) {
   const pathname = usePathname();
-  const t = useTranslations();
   return (
     <>
       <li className="grow first:rounded-s-md last:rounded-e-md overflow-hidden">
@@ -27,7 +25,7 @@ export function NavItem({ path, icon , toolTipMessage}: NavItem) {
           <InteractiveIcon
               icon={icon}
               animation={false}
-              message={t(toolTipMessage)}
+              message={toolTipMessage}
             />
         </Link>
       </li>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 84ef7ac5..3e1dbb42 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -6,29 +6,7 @@ import {
   CubeIcon,
   StackIcon,
 } from "@radix-ui/react-icons";
-
-const navigation: Navigation = [
-  {
-    path: "/",
-    icon: <ClockIcon />,
-    toolTipMessage: "Index.HomePage.title",
-  },
-  {
-    path: "/solves",
-    icon: <StackIcon />,
-    toolTipMessage: "Index.SolvesPage.title",
-  },
-  {
-    path: "/stats",
-    icon: <BarChartIcon />,
-    toolTipMessage: "Index.StatsPage.title",
-  },
-  {
-    path: "/cubes",
-    icon: <CubeIcon />,
-    toolTipMessage: "Index.CubesPage.title",
-  },
-];
+import { useTranslations } from "next-intl";
 
 type Navigation = NavItem[];
 
@@ -39,6 +17,31 @@ interface NavItem {
 }
 
 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) => {