86 lines
4.0 KiB
TypeScript
86 lines
4.0 KiB
TypeScript
|
import { MagnifyingGlassIcon, UserIcon } from "@heroicons/react/24/outline";
|
||
|
|
import { Link, NavLink } from "react-router-dom";
|
||
|
|
import { memo } from "react";
|
||
|
|
import { NAV_ITEMS } from "./constants";
|
||
|
|
import { SearchBar } from "./SearchBar";
|
||
|
|
import { Logo } from "./Logo";
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
onSearch?: (query: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Header = memo(function Header({ onSearch }: HeaderProps) {
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-50 bg-[#13294B] text-white shadow-lg">
|
||
|
|
<div className="container mx-auto px-4">
|
||
|
|
{/* Main Content */}
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<Logo />
|
||
|
|
<SearchBar onSearch={onSearch} />
|
||
|
|
|
||
|
|
{/* User Actions */}
|
||
|
|
<div className="flex items-center space-x-6">
|
||
|
|
<Link
|
||
|
|
to="/login"
|
||
|
|
className="group flex items-center space-x-2 rounded-lg bg-[#00539B] px-5
|
||
|
|
py-2.5 shadow-lg transition-all duration-300
|
||
|
|
hover:-translate-y-0.5 hover:bg-[#0063B8]
|
||
|
|
hover:shadow-[#00539B]/50 focus:outline-none
|
||
|
|
focus:ring-2 focus:ring-[#8EADD4] focus:ring-offset-2"
|
||
|
|
aria-label="Login"
|
||
|
|
>
|
||
|
|
<UserIcon className="h-5 w-5 transition-transform group-hover:scale-110" />
|
||
|
|
<span className="font-medium">Login</span>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Navigation */}
|
||
|
|
<nav className="mt-4 rounded-lg bg-[#0B1A32]/90">
|
||
|
|
<div className="flex items-center justify-between px-6 py-1">
|
||
|
|
<div className="flex space-x-1">
|
||
|
|
{NAV_ITEMS.map((item) => (
|
||
|
|
<NavLink
|
||
|
|
key={item.to}
|
||
|
|
to={item.to}
|
||
|
|
className={({ isActive }) => `
|
||
|
|
group relative px-4 py-3 rounded-md
|
||
|
|
transition-all duration-300 ease-out
|
||
|
|
outline-none
|
||
|
|
${isActive ? 'text-white font-medium' : 'text-[#8EADD4]'}
|
||
|
|
`}
|
||
|
|
>
|
||
|
|
{({ isActive }) => (
|
||
|
|
<>
|
||
|
|
<span className="relative z-10 transition-colors group-hover:text-white">
|
||
|
|
{item.label}
|
||
|
|
</span>
|
||
|
|
<span className={`
|
||
|
|
absolute inset-0 rounded-md bg-gradient-to-b
|
||
|
|
from-white/10 to-transparent transition-opacity
|
||
|
|
duration-300 ease-out opacity-0 group-hover:opacity-10
|
||
|
|
${isActive ? 'opacity-5' : ''}
|
||
|
|
`} />
|
||
|
|
<span className={`
|
||
|
|
absolute bottom-1.5 left-1/2 h-[2px] bg-white
|
||
|
|
transition-all duration-300 ease-out
|
||
|
|
transform -translate-x-1/2
|
||
|
|
${isActive
|
||
|
|
? 'w-12 opacity-100'
|
||
|
|
: 'w-0 opacity-0 group-hover:w-8 group-hover:opacity-50'
|
||
|
|
}
|
||
|
|
`} />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
});
|