81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { SharedData } from '@/types/global';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { File, FileQuestion, FileText, Image, Video } from 'lucide-react';
|
|
|
|
const Curriculum = ({ course }: { course: Course }) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { frontend } = translate;
|
|
const videoTypes = ['video', 'video_url'];
|
|
|
|
return (
|
|
<>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.course_curriculum}</h6>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
className="space-y-4"
|
|
defaultValue={course.sections.length > 0 ? (course.sections[0].id as string) : ''}
|
|
>
|
|
{course.sections.map((section, index) => (
|
|
<AccordionItem key={section.id} value={section.id as string} className="overflow-hidden rounded-lg border">
|
|
<AccordionTrigger className="[&[data-state=open]]:!bg-muted px-4 py-3 text-base hover:no-underline">
|
|
{index + 1}. {section.title}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-1 p-4">
|
|
{section.section_lessons.length > 0 ? (
|
|
<>
|
|
{section.section_lessons.map((lesson) => (
|
|
<div key={lesson.id} className="flex items-center justify-between gap-3 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-secondary flex h-6 w-6 items-center justify-center rounded-full">
|
|
{videoTypes.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>
|
|
|
|
<p>{lesson.title}</p>
|
|
</div>
|
|
|
|
{videoTypes.includes(lesson.lesson_type) && <span>{lesson.duration}</span>}
|
|
</div>
|
|
))}
|
|
|
|
{section.section_quizzes.map((quiz) => (
|
|
<div key={quiz.id} className="flex items-center justify-between gap-3 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-secondary flex h-6 w-6 items-center justify-center rounded-full">
|
|
<FileQuestion className="h-4 w-4" />
|
|
</div>
|
|
|
|
<p>{quiz.title}</p>
|
|
</div>
|
|
|
|
<span>{quiz.duration}</span>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="px-4 py-3 text-center">
|
|
<p>{frontend.there_is_no_lesson_added}</p>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Curriculum;
|