71 lines
1.9 KiB
TypeScript
Executable File
71 lines
1.9 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, lecture, selectedLectureId } =
|
|
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">
|
|
{!selectedLectureId ? course?.title : lecture?.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(
|
|
!selectedLectureId
|
|
? course?.createdAt
|
|
: lecture?.createdAt
|
|
).format("YYYY年M月D日")}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
{"最后更新:"}
|
|
{dayjs(
|
|
!selectedLectureId
|
|
? course?.updatedAt
|
|
: lecture?.updatedAt
|
|
).format("YYYY年M月D日")}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<EyeOutlined></EyeOutlined>
|
|
<div>{`观看次数${
|
|
!selectedLectureId
|
|
? course?.views || 0
|
|
: lecture?.views || 0
|
|
}`}</div>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<BookOutlined />
|
|
<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
|
|
</div>
|
|
<CourseOperationBtns />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|