58 lines
1.6 KiB
TypeScript
Executable File
58 lines
1.6 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";
|
|
import CourseOperationBtns from "./JoinLearingButton";
|
|
|
|
export default function CourseDetailTitle() {
|
|
const { course } = useContext(CourseDetailContext);
|
|
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 items-center gap-5">
|
|
{course?.author?.showname && (
|
|
<div>
|
|
发布者:
|
|
{course?.author?.showname}
|
|
</div>
|
|
)}
|
|
{course?.depts && course?.depts?.length > 0 && (
|
|
<div>
|
|
发布单位:
|
|
{course?.depts?.map((dept) => dept.name)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-gray-600 flex w-full justify-start items-center gap-5">
|
|
<div className="flex gap-1">
|
|
<CalendarOutlined></CalendarOutlined>
|
|
{"发布于:"}
|
|
{dayjs(course?.createdAt).format("YYYY年M月D日")}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
{"最后更新:"}
|
|
{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>
|
|
<CourseOperationBtns />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|