37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
// components/CourseSyllabus/LectureItem.tsx
|
||
|
|
|
||
|
|
import { Lecture } from "@nice/common";
|
||
|
|
import React from "react";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { ClockIcon, PlayCircleIcon } from "@heroicons/react/24/outline";
|
||
|
|
|
||
|
|
interface LectureItemProps {
|
||
|
|
lecture: Lecture;
|
||
|
|
onClick: (lectureId: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const LectureItem: React.FC<LectureItemProps> = ({
|
||
|
|
lecture,
|
||
|
|
onClick,
|
||
|
|
}) => (
|
||
|
|
<motion.button
|
||
|
|
initial={{ opacity: 0, x: -20 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors"
|
||
|
|
onClick={() => onClick(lecture.id)}>
|
||
|
|
<PlayCircleIcon 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.description && (
|
||
|
|
<p className="text-sm text-gray-500 mt-1">
|
||
|
|
{lecture.description}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||
|
|
<ClockIcon className="w-4 h-4" />
|
||
|
|
<span>{lecture.duration}分钟</span>
|
||
|
|
</div>
|
||
|
|
</motion.button>
|
||
|
|
);
|