import React, { useState } from "react";
const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
const [selectedLesson, setSelectedLesson] = useState(null);
return (
{/* top */}
{courseTitle}
{lessonName}
{grade}
{/* divider */}
{/* course title */}
{chapters.map((chapter, index) => (
{chapter.title}
{chapter.duration}
{/* course lessons */}
{chapter.lessons.map((lesson, i) => (
{/* right div dot dot */}
{Number(i) !== chapter.lessons.length - 1 && (
)}
{/* left div content */}
setSelectedLesson(lesson)}
>
{/* top */}
{lesson.title}
{lesson.duration}
{/* divider */}
{/* bottom */}
{lesson.play}
))}
))}
);
};
export default CourseChapter;
CourseChapter.defaultProps = {
courseTitle: "سرفصل دوره",
lessonName: "علوم تجربی",
grade: "پایه ششم",
chapters: [
{
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13",
lessons: [
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: false,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: false,
},
],
},
],
};