2025-01-22 19:24:52 +08:00
|
|
|
import { MagnifyingGlassIcon, UserIcon } from "@heroicons/react/24/outline";
|
|
|
|
|
import { Link, NavLink } from "react-router-dom";
|
|
|
|
|
import { memo } from "react";
|
|
|
|
|
import { SearchBar } from "./SearchBar";
|
|
|
|
|
import { Logo } from "./Logo";
|
2025-01-22 23:19:58 +08:00
|
|
|
import Navigation from "./navigation";
|
2025-01-22 19:24:52 +08:00
|
|
|
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">
|
|
|
|
|
<div className="py-4">
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<Logo />
|
|
|
|
|
<SearchBar onSearch={onSearch} />
|
|
|
|
|
<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>
|
2025-01-22 23:19:58 +08:00
|
|
|
<Navigation></Navigation>
|
2025-01-22 19:24:52 +08:00
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
);
|
|
|
|
|
});
|
