53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
import { getCompletedContents } from '@/lib/utils';
|
|
import { StudentCourseProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import Lesson from '../partials/lesson';
|
|
import Quiz from '../partials/quiz';
|
|
|
|
const Modules = () => {
|
|
const { props } = usePage<StudentCourseProps>();
|
|
const { modules, watchHistory } = props;
|
|
const completed = getCompletedContents(watchHistory);
|
|
// const completion = getCourseCompletion(props.course, completed);
|
|
|
|
return (
|
|
<>
|
|
{modules.length > 0 ? (
|
|
<Accordion type="single" collapsible className="space-y-4" defaultValue={modules[0].id as string}>
|
|
{modules.map((section, ind) => (
|
|
<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">
|
|
{ind + 1}. {section.title}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-2 p-2">
|
|
{section.section_lessons.length > 0 ? (
|
|
<>
|
|
{section.section_lessons.map((lesson) => (
|
|
<Lesson key={lesson.id} lesson={lesson} completed={completed} />
|
|
))}
|
|
|
|
{section.section_quizzes.map((quiz) => (
|
|
<Quiz key={quiz.id} quiz={quiz} completed={completed} />
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="px-4 py-3 text-center">
|
|
<p>There is no lesson added</p>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
) : (
|
|
<div className="p-6 text-center">
|
|
<p>There is no section added</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Modules;
|