90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import LessonIcons from '@/components/lesson-icons';
|
|
import { cn } from '@/lib/utils';
|
|
import { StudentCourseProps } from '@/types/page';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface Props {
|
|
lesson: SectionLesson;
|
|
completed: { id: number | string; type: string }[];
|
|
}
|
|
|
|
const LessonWrapper = ({ lesson, children }: { lesson: SectionLesson; children: ReactNode }) => (
|
|
<div className="relative flex items-center justify-between rounded-sm border p-2 md:gap-3">
|
|
{children}
|
|
|
|
{['video', 'video_url'].includes(lesson.lesson_type) && (
|
|
<span className="absolute top-0.5 right-1 text-xs md:relative md:text-sm">{lesson.duration}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const Lesson = ({ lesson, completed }: Props) => {
|
|
const { props } = usePage<StudentCourseProps>();
|
|
const { course, watchHistory } = props;
|
|
|
|
const dripContent = Boolean(course.drip_content);
|
|
const isNext = lesson.id == watchHistory.next_watching_id;
|
|
const isCompleted = completed.some((item) => item.type === 'lesson' && item.id == lesson.id);
|
|
const isCurrentLesson = watchHistory.current_watching_id == lesson.id;
|
|
|
|
return !dripContent ? (
|
|
<LessonWrapper lesson={lesson}>
|
|
<Link
|
|
className={cn(
|
|
'flex cursor-pointer items-center gap-3 py-1',
|
|
isCompleted ? 'text-blue-500' : isCurrentLesson ? 'text-green-500' : 'text-primary',
|
|
)}
|
|
href={route('course.player', {
|
|
type: 'lesson',
|
|
watch_history: watchHistory.id,
|
|
lesson_id: lesson.id,
|
|
})}
|
|
>
|
|
<LessonIcons type="active" lesson={lesson} dripContent={true} isCompleted={isCompleted} />
|
|
|
|
<p>{lesson.title}</p>
|
|
</Link>
|
|
</LessonWrapper>
|
|
) : (
|
|
<>
|
|
{isCompleted || isCurrentLesson || isNext ? (
|
|
<LessonWrapper lesson={lesson}>
|
|
<Link
|
|
className={cn(
|
|
'flex cursor-pointer items-center gap-3 py-1',
|
|
isCompleted ? 'text-blue-500' : isCurrentLesson ? 'text-green-500' : isNext ? 'text-primary' : 'text-gray-500',
|
|
)}
|
|
href={route('course.player', {
|
|
type: 'lesson',
|
|
watch_history: watchHistory.id,
|
|
lesson_id: lesson.id,
|
|
})}
|
|
>
|
|
<LessonIcons
|
|
type="active"
|
|
lesson={lesson}
|
|
dripContent={false}
|
|
isCompleted={isCompleted}
|
|
isCurrentLesson={isCurrentLesson}
|
|
isNext={isNext}
|
|
/>
|
|
|
|
<p>{lesson.title}</p>
|
|
</Link>
|
|
</LessonWrapper>
|
|
) : (
|
|
<LessonWrapper lesson={lesson}>
|
|
<div className="flex items-center gap-3 py-1 text-gray-500">
|
|
<LessonIcons type="inactive" lesson={lesson} dripContent={true} isCompleted={isCompleted} />
|
|
|
|
<p>{lesson.title}</p>
|
|
</div>
|
|
</LessonWrapper>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Lesson;
|