origin/apps/web/src/app/main/layout/MainHeader.tsx

import { useContext, useState } from "react";
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
import { EditFilled, PlusOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu";
import { useMainContext } from "./MainProvider";

export function MainHeader() {
	const { isAuthenticated, user } = useAuth();
	const { id } = useParams();
	const navigate = useNavigate();
	const { searchValue, setSearchValue } = useMainContext();
	return (
		<div className="select-none  flex items-center  justify-between p-4 bg-white shadow-md border-b border-gray-100 fixed  w-full z-30 ">
			<div className="flex items-center space-x-8">
				<div
					onClick={() => navigate("/")}
					className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer">
					烽火慕课
				</div>
				<NavigationMenu />
			</div>
			<div className="flex items-center space-x-6">
				<div className="group relative">
					<Input
						size="large"
						prefix={
							<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
						}
						placeholder="搜索课程"
						className="w-72 rounded-full"
						value={searchValue}
						onChange={(e) => setSearchValue(e.target.value)}
						onPressEnter={(e) => {
							if (
								!window.location.pathname.startsWith(
									"/courses/"
								)
							) {
								navigate(`/courses/`);
								window.scrollTo({
									top: 0,
									behavior: "smooth",
								});
							}
						}}
					/>
				</div>
				{isAuthenticated && (
					<>
						<Button
							onClick={() => {
								const url = id
									? `/course/${id}/editor`
									: "/course/editor";
								navigate(url);
							}}
							className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
							icon={<EditFilled />}>
							{id ? "编辑课程" : "创建课程"}
						</Button>
					</>
				)}
				{
					isAuthenticated && <Button
						onClick={() => {

							window.location.href = "/path/editor";
						}}

						icon={<PlusOutlined></PlusOutlined>} >创建学习路径</Button>
				}
				{isAuthenticated ? (
					<UserMenu />
				) : (
					<Button
						onClick={() => navigate("/login")}
						className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
						icon={<UserOutlined />}>
						登录
					</Button>
				)}
			</div>
		</div>
	);
}