doctor-mail/apps/web/src/components/layout/main/Header.tsx

import { Link, NavLink } 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";
import SineWavesCanvas from "../../animation/sine-wave";
interface HeaderProps {
    onSearch?: (query: string) => void;
}
export const Header = memo(function Header({ onSearch }: HeaderProps) {
    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="container mx-auto px-4">
                <div className="py-3">
                    <div className="flex items-center justify-between gap-4">
                        <div className=" text-xl font-bold">烽火建言</div>
                        <div className="flex-grow max-w-2xl">
                            <SearchBar onSearch={onSearch} />
                        </div>
                        <div className="flex items-center gap-6">
                            {!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>
    );
});