From 62ecb064225fcb6670385ccacba8d08e98491a72 Mon Sep 17 00:00:00 2001
From: Taqi Tahmid <mdtaqitahmid@gmail.com>
Date: Fri, 11 Apr 2025 21:47:52 +0300
Subject: [PATCH] frontend: add tooltip component and replace tooltip with it

---
 frontend/src/components/Introduction.tsx |  6 ++--
 frontend/src/components/Navbar.tsx       | 37 ++++++++++--------------
 frontend/src/components/Tooltip.tsx      | 25 ++++++++++++++++
 frontend/src/pages/Projects.tsx          |  6 ++--
 4 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/Tooltip.tsx

diff --git a/frontend/src/components/Introduction.tsx b/frontend/src/components/Introduction.tsx
index d0c8144..43006e2 100644
--- a/frontend/src/components/Introduction.tsx
+++ b/frontend/src/components/Introduction.tsx
@@ -1,5 +1,6 @@
 import { Linkedin, Github, Award } from 'lucide-react'
 import { COLORS } from '../constants'
+import { Tooltip } from './Tooltip'
 
 const Introduction = () => {
   const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold'
@@ -57,6 +58,7 @@ const Introduction = () => {
       <div className="flex justify-center gap-8 py-3">
         {socialLinks.map((link, index) => (
           <div key={index} className="group relative">
+            <Tooltip label={link.label} position="top">
             <a
               href={link.href}
               target="_blank"
@@ -66,9 +68,7 @@ const Introduction = () => {
             >
               {link.icon}
             </a>
-            <span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-sm text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
-              {link.label}
-            </span>
+            </Tooltip>
           </div>
         ))}
       </div>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 4faef76..694e5de 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from 'lucide-react'
 import { COLORS, EMAIL, RESUME } from '../constants'
+import { Tooltip } from './Tooltip'
 
 interface NavProps {
   darkMode: boolean
@@ -11,6 +12,7 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
   const [copied, setCopied] = useState(false)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
+  const copyText = copied ? 'Copied!' : 'Click to copy'
 
   const handleCopyEmail = async () => {
     try {
@@ -49,12 +51,12 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
   return (
     <div className="w-full flex justify-center">
       <nav className="py-5 mb-6 flex justify-between dark:text-white w-full max-w-5xl px-4">
+        <Tooltip label={copyText} position='bottom'>
         <button
           onClick={handleCopyEmail}
           className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
         >
           <Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
-          <span>Email</span>
           {copied ? (
             <Check size={16} className="text-green-500" />
           ) : (
@@ -63,41 +65,34 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
               className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             />
           )}
-          <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
-            {copied ? 'Copied!' : 'Click to copy'}
-          </span>
         </button>
-
+        </Tooltip>
         <ul className="flex items-center">
           <li
             className="transition ease-in-out delay-50 duration-100 cursor-pointer"
             onClick={toggleDarkMode}
           >
-            <div className="group relative">
-              {darkMode ? (
-                <Sun className="text-amber-400 hover:scale-110" size={30} />
-              ) : (
-                <Moon size={24} />
-              )}
-              <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
-                {darkMode ? 'Light Mode' : 'Dark Mode'}
-              </span>
-            </div>
+            <Tooltip label={darkMode ? 'Light Mode' : 'Dark Mode'} position='bottom'>
+              <div className="flex items-center space-x-2 mr-4">
+                {darkMode ? (
+                  <Sun className="text-amber-400 hover:scale-110" size={30} />
+                ) : (
+                  <Moon size={24} />
+                )}
+              </div>
+            </Tooltip>
           </li>
           <li className="transition ease-in-out delay-50 duration-100">
-            <div className="group relative">
+            <Tooltip label="Resume" position='bottom'>
               <a
-                className="text-white p-2 ml-8 inline-flex"
+                className="text-white flex items-center space-x-2 ml-4"
                 href={RESUME}
                 target="_blank"
                 rel="noreferrer"
               >
                 <FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} />
               </a>
-              <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
-                Resume
-              </span>
-            </div>
+            </Tooltip>
           </li>
           <li className="p-2 ml-5 cursor-pointer">
             <div ref={menuRef} className="group relative">
diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx
new file mode 100644
index 0000000..4f425fc
--- /dev/null
+++ b/frontend/src/components/Tooltip.tsx
@@ -0,0 +1,25 @@
+export interface TooltipProps {
+  children: React.ReactNode
+  label: string
+  position: 'top' | 'bottom' | 'left' | 'right'
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ children, label, position }) => {
+  const tooltipStyles = {
+    top: 'bottom-full left-1/2 -translate-x-1/2',
+    bottom: 'top-full left-1/2 -translate-x-1/2',
+    left: 'right-full top-1/2 -translate-y-1/2',
+    right: 'left-full top-1/2 -translate-y-1/2',
+  }
+  const tooltipPosition:string = tooltipStyles[position]
+  const tooltipClass = `pointer-events-none absolute mt-2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100 ${tooltipPosition}`
+
+  return (
+    <div className="group relative">
+      {children}
+      <span className={tooltipClass}>
+        {label}
+      </span>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
index eaa9c0d..6170e24 100644
--- a/frontend/src/pages/Projects.tsx
+++ b/frontend/src/pages/Projects.tsx
@@ -1,5 +1,6 @@
 import { Github, Link } from 'lucide-react'
 import { COLORS } from '../constants'
+import { Tooltip } from '../components/Tooltip'
 
 const Projects = () => {
   const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold'
@@ -96,6 +97,7 @@ const Projects = () => {
             <div className="flex gap-4">
               {project.links.map((link, linkIndex) => (
                 <div key={linkIndex} className="group relative">
+                  <Tooltip label={link.label} position="top">
                   <a
                     href={link.href}
                     target="_blank"
@@ -105,9 +107,7 @@ const Projects = () => {
                   >
                     {link.icon}
                   </a>
-                  <span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-sm text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
-                    {link.label}
-                  </span>
+                  </Tooltip>
                 </div>
               ))}
             </div>