diff --git a/src/App.js b/src/App.js index 3778b76..15939d6 100644 --- a/src/App.js +++ b/src/App.js @@ -63,7 +63,7 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* */} {/* */} {/* */} diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js index 34bdece..983d2d4 100644 --- a/src/components/CourseChapter/index.js +++ b/src/components/CourseChapter/index.js @@ -1,6 +1,8 @@ -import React from "react"; +import React, { useState } from "react"; const CourseChapter = ({ chapters }) => { + const [selectedLesson,setSelectedLesson] = useState(null); + return ( { {/* divider */} {/* course title */} - {chapters.map((chapter, index) => ( + {chapters.map((chapter, i) => ( {chapter.title} {chapter.duration} + {/* course lessons */} {chapter.lessons.map((lesson, index) => ( - + + {/* right div dot dot */} - - mahdi + + + {/* left div content */} - + setSelectedLesson(lesson)} + > {/* top */} - - - {lesson.title} - - {lesson.duration} - - - - {/* bottom */} - - - {lesson.play} + + + {lesson.title} + + + {lesson.duration} + {/* divider */} + + {/* bottom */} + + {lesson.play} + ))} ))} + {/* blue left border */} @@ -68,8 +95,32 @@ CourseChapter.defaultProps = { title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", duration: "2:30:13", lessons: [ - { title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" }, + { + title: "آیا گوگل از ما دزدی میکند؟", + duration: "14:30", + play: "پخش", + // step : true, + }, + { + title: "چگونگی ساخت نیروگاه های برقی", + duration: "22:31", + play: "در حال پخش", + // step : false, + }, + { + title: "آیا از اینترنت می توان درآمد داشت؟", + duration: "10:09", + play: "نمایش", + // step : false, + }, + { + title: "زمین سبز و آسمان آبی", + duration: "56:09", + play: "نمایش", + // step : false, + }, ], }, ], + };
{chapter.title}
{lesson.title}
+ {lesson.title} +