58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Link, NavLink, useNavigate } from "react-router-dom";
|
||
import { memo } from "react";
|
||
import { SearchBar } from "./SearchBar";
|
||
import Navigation from "./navigation";
|
||
import { useAuth } from "@web/src/providers/auth-provider";
|
||
import { UserOutlined } from "@ant-design/icons";
|
||
import { UserMenu } from "../element/usermenu/usermenu";
|
||
|
||
export const Header = memo(function Header() {
|
||
const { isAuthenticated } = useAuth();
|
||
|
||
return (
|
||
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
|
||
<div className=" mx-auto px-4">
|
||
<div className="py-4">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div className="">
|
||
<span className="text-xl font-bold">
|
||
首长机关信箱
|
||
</span>
|
||
<p className=" text-sm text-secondary-50">
|
||
聆怀若水，应语如风；纾难化困，践诺成春
|
||
</p>
|
||
</div>
|
||
<div className="flex-grow max-w-2xl">
|
||
<SearchBar />
|
||
</div>
|
||
<div className="flex items-center ">
|
||
{!isAuthenticated ? (
|
||
<Link
|
||
to="/auth"
|
||
className="group flex items-center gap-2 rounded-lg
|
||
bg-[#00539B]/90 px-5 py-2.5 font-medium
|
||
shadow-lg transition-all duration-300
|
||
hover:-translate-y-0.5 hover:bg-[#0063B8]
|
||
hover:shadow-xl hover:shadow-[#00539B]/30
|
||
focus:outline-none focus:ring-2
|
||
focus:ring-[#8EADD4] focus:ring-offset-2
|
||
focus:ring-offset-[#13294B]"
|
||
aria-label="Login">
|
||
<UserOutlined
|
||
className="h-5 w-5 transition-transform
|
||
group-hover:scale-110 group-hover:rotate-12"></UserOutlined>
|
||
|
||
<span>登录</span>
|
||
</Link>
|
||
) : (
|
||
<UserMenu />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Navigation />
|
||
</div>
|
||
</header>
|
||
);
|
||
});
|