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