60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
//info: Header component to display the header of the page including the logo and user information where thr user can logout
|
|
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import backgroundImage from "../assets/1.jpg";
|
|
|
|
/**
|
|
* Renders the header component.
|
|
* @returns JSX.Element representing the header component.
|
|
*/
|
|
function Header(): JSX.Element {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleLogout = (): void => {
|
|
localStorage.clear();
|
|
};
|
|
|
|
return (
|
|
<header
|
|
className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
|
|
style={{ backgroundImage: `url(${backgroundImage})` }}
|
|
>
|
|
<Link to="/your-projects">
|
|
<img
|
|
src="/src/assets/Logo.svg"
|
|
alt="TTIME Logo"
|
|
className="w-11 h-14 cursor-pointer"
|
|
/>
|
|
</Link>
|
|
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => {
|
|
setIsOpen(true);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
<button className="mr-4 underline font-bold text-white">
|
|
{localStorage.getItem("username")}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 bg-white border rounded shadow-lg">
|
|
<Link to="/">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="block px-2 py-1 text-black hover:bg-gray-200"
|
|
>
|
|
Logout
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|