37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
// components/CourseSyllabus/LectureItem.tsx
|
|
|
|
import { Lecture, LectureType } from "@nice/common";
|
|
import React from "react";
|
|
import { ClockCircleOutlined, FileTextOutlined, PlayCircleOutlined } from "@ant-design/icons"; // 使用 Ant Design 图标
|
|
|
|
interface LectureItemProps {
|
|
lecture: Lecture;
|
|
onClick: (lectureId: string) => void;
|
|
}
|
|
|
|
export const LectureItem: React.FC<LectureItemProps> = ({
|
|
lecture,
|
|
onClick,
|
|
}) => (
|
|
<div
|
|
className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
|
|
onClick={() => onClick(lecture.id)}>
|
|
{lecture.type === LectureType.VIDEO && (
|
|
<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
|
|
)}
|
|
{lecture.type === LectureType.ARTICLE && (
|
|
<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
|
|
)}
|
|
<div className="flex-grow">
|
|
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
|
|
{lecture.subTitle && (
|
|
<p className="text-sm text-gray-500 mt-1">{lecture.subTitle}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
|
<ClockCircleOutlined className="w-4 h-4" />
|
|
<span>{lecture.duration}分钟</span>
|
|
</div>
|
|
</div>
|
|
);
|