72 lines
2.3 KiB
TypeScript
Executable File
72 lines
2.3 KiB
TypeScript
Executable File
import { useContext, useState } from "react";
|
|
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
|
|
import {
|
|
EditFilled,
|
|
HomeOutlined,
|
|
SearchOutlined,
|
|
UserOutlined,
|
|
} from "@ant-design/icons";
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { UserMenu } from "@web/src/app/main/layout/UserMenu/UserMenu";
|
|
import { CourseDetailContext } from "../CourseDetailContext";
|
|
|
|
|
|
const { Header } = Layout;
|
|
|
|
export function CourseDetailHeader() {
|
|
const [searchValue, setSearchValue] = useState("");
|
|
const { id } = useParams();
|
|
const { isAuthenticated, user, hasSomePermissions, hasEveryPermissions } =
|
|
useAuth();
|
|
const navigate = useNavigate();
|
|
const { course, canEdit } = useContext(CourseDetailContext);
|
|
|
|
return (
|
|
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
|
|
<div className="w-full flex items-center justify-between h-full">
|
|
<div className="flex items-center space-x-10">
|
|
<HomeOutlined
|
|
onClick={() => {
|
|
navigate("/");
|
|
}}
|
|
className="text-2xl text-primary-500 hover:scale-105 cursor-pointer"
|
|
/>
|
|
|
|
<div className="text-2xl tracking-widest font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent transition-transform ">
|
|
{course?.title}
|
|
</div>
|
|
{/* <NavigationMenu /> */}
|
|
</div>
|
|
<div className="flex items-center space-x-6">
|
|
{canEdit && (
|
|
<>
|
|
<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 />}>
|
|
{"编辑课程"}
|
|
</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>
|
|
</Header>
|
|
);
|
|
}
|