54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Circle, CircleCheck, File, FileText, Image, Lock, Video } from 'lucide-react';
|
|
|
|
type Props =
|
|
| {
|
|
type: 'active' | 'inactive';
|
|
dripContent: false;
|
|
lesson: SectionLesson;
|
|
isCompleted: boolean;
|
|
isCurrentLesson: boolean;
|
|
isNext: boolean;
|
|
}
|
|
| {
|
|
type: 'active' | 'inactive';
|
|
dripContent: true;
|
|
lesson: SectionLesson;
|
|
isCompleted: boolean;
|
|
isCurrentLesson?: boolean;
|
|
isNext?: boolean;
|
|
};
|
|
|
|
const LessonIcons = (props: Props) => {
|
|
const { type, lesson, dripContent, isCompleted, isCurrentLesson, isNext } = props;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{type === 'active' ? (
|
|
<>
|
|
{isCompleted ? (
|
|
<CircleCheck className="h-4 w-4" />
|
|
) : dripContent ? (
|
|
<>{!isCurrentLesson ? <Circle className="h-4 w-4" /> : isNext ? <Circle className="h-4 w-4" /> : <Lock className="h-4 w-4" />}</>
|
|
) : (
|
|
<Lock className="h-4 w-4" />
|
|
)}
|
|
</>
|
|
) : (
|
|
<Lock className="h-4 w-4" />
|
|
)}
|
|
|
|
<div className="bg-secondary flex h-6 w-6 items-center justify-center rounded-full">
|
|
{['video', 'video_url', 'embed'].includes(lesson.lesson_type) && <Video className="h-4 w-4" />}
|
|
|
|
{['document', 'iframe'].includes(lesson.lesson_type) && <File className="h-4 w-4" />}
|
|
|
|
{lesson.lesson_type === 'text' && <FileText className="h-4 w-4" />}
|
|
|
|
{lesson.lesson_type === 'image' && <Image className="h-4 w-4" />}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LessonIcons;
|