62 lines
1.9 KiB
TypeScript
Executable File
62 lines
1.9 KiB
TypeScript
Executable File
// components/CourseSyllabus/LectureItem.tsx
|
|
|
|
import { Lecture, LectureType, LessonTypeLabel } from "@nice/common";
|
|
import React, { useMemo } from "react";
|
|
import {
|
|
ClockCircleOutlined,
|
|
EyeOutlined,
|
|
FileTextOutlined,
|
|
PlayCircleOutlined,
|
|
} from "@ant-design/icons"; // 使用 Ant Design 图标
|
|
import { useParams } from "react-router-dom";
|
|
|
|
interface LectureItemProps {
|
|
lecture: Lecture;
|
|
onClick: (lectureId: string) => void;
|
|
}
|
|
|
|
export const LectureItem: React.FC<LectureItemProps> = ({
|
|
lecture,
|
|
onClick,
|
|
}) => {
|
|
const { lectureId } = useParams();
|
|
const isReading = useMemo(() => {
|
|
return lecture?.id === lectureId;
|
|
}, [lectureId, lecture]);
|
|
return (
|
|
<div
|
|
className={`w-full flex items-center gap-4 p-4 text-left transition-colors cursor-pointer
|
|
${
|
|
isReading
|
|
? "bg-blue-50 border-l-4 border-blue-500 hover:bg-blue-50"
|
|
: "hover:bg-gray-200"
|
|
}`}
|
|
onClick={() => onClick(lecture.id)}>
|
|
{lecture?.meta?.type === LectureType.VIDEO && (
|
|
<div className="text-blue-500 flex items-center">
|
|
<PlayCircleOutlined className="w-5 h-5 flex-shrink-0" />
|
|
<span>{LessonTypeLabel[lecture?.meta?.type]}</span>
|
|
</div>
|
|
)}
|
|
{lecture?.meta?.type === LectureType.ARTICLE && (
|
|
<div className="text-blue-500 flex items-center">
|
|
<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />{" "}
|
|
<span>{LessonTypeLabel[lecture?.meta?.type]}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex-grow flex justify-between items-center w-2/3 realative">
|
|
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
|
|
{lecture.subTitle && (
|
|
<span className="text-sm text-gray-500 mt-1">
|
|
{lecture.subTitle}
|
|
</span>
|
|
)}
|
|
<div className="text-gray-500 whitespace-normal">
|
|
<EyeOutlined></EyeOutlined>
|
|
<span className="ml-2">{lecture?.meta?.views ? lecture?.meta?.views : 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|