58 lines
1.7 KiB
TypeScript
Executable File
58 lines
1.7 KiB
TypeScript
Executable File
import { useContext } from "react";
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { BookOutlined, CalendarOutlined, EditTwoTone, EyeOutlined, ReloadOutlined } from "@ant-design/icons";
|
|
import dayjs from "dayjs";
|
|
|
|
export default function CourseDetailTitle() {
|
|
const {
|
|
course,
|
|
isLoading,
|
|
canEdit,
|
|
lecture,
|
|
lectureIsLoading,
|
|
selectedLectureId,
|
|
} = useContext(CourseDetailContext);
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-6">
|
|
<div className="flex justify-start w-full text-2xl font-bold">
|
|
{course?.title}
|
|
</div>
|
|
<div className="text-gray-600 flex w-full justify-start gap-5">
|
|
<div className="flex gap-1">
|
|
<CalendarOutlined></CalendarOutlined>
|
|
{"创建于:"}
|
|
{dayjs(course?.createdAt).format("YYYY年M月D日")}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<ReloadOutlined></ReloadOutlined>
|
|
{"更新于:"}
|
|
{dayjs(course?.updatedAt).format("YYYY年M月D日")}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<EyeOutlined></EyeOutlined>
|
|
<div>{`观看次数${course?.meta?.views || 0}`}</div>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<BookOutlined />
|
|
<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
|
|
</div>
|
|
{canEdit && (
|
|
<div
|
|
className="flex gap-1 text-primary hover:cursor-pointer"
|
|
onClick={() => {
|
|
const url = course?.id
|
|
? `/course/${course?.id}/editor`
|
|
: "/course/editor";
|
|
navigate(url);
|
|
}}>
|
|
<EditTwoTone></EditTwoTone>
|
|
{"点击编辑课程"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|