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, }, ], }, ], };