taqi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: add tooltip component and replace tooltip with it

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-11 21:47:52 +03:00
parent c1abd36482
commit 62ecb06422
4 changed files with 47 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Introduction.tsx
View File

@ -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>

37
frontend/src/components/Navbar.tsx
View File

@ -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">

25
frontend/src/components/Tooltip.tsx Normal file
View File

@ -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>
)
}