course component added

src/App.js

@@ -63,12 +63,12 @@ function App() {
         {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
-        <ProductImage />
+        {/* <ProductImage /> */}
         {/* <ProductTab /> */}
-        {/* <ProductStatusCard /> */}
-        {/* <AdvertisementDesign1 /> */}
-        {/* <AdvertisementDesign2 /> */}
-        {/* <AdvertisementDesign3 /> */}
+        <ProductStatusCard />
+        <AdvertisementDesign1 />
+        <AdvertisementDesign2 />
+        <AdvertisementDesign3 />
         <CourseChapter />
       </div>
     </Provider>

src/components/CourseChapter/index.js

@@ -22,31 +22,26 @@ const CourseChapter = ({ chapters }) => {
         {/* divider */}
         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
         {/* course title */}
-        {chapters.map((chapter, i) => (
+        {chapters.map((chapter, index) => (
           <div className="flex flex-col">
             <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
               <p className="text-sm text-white">{chapter.title}</p>
               <span className="text-sm text-white">{chapter.duration}</span>
             </div>
             {/* course lessons */}
-            {chapter.lessons.map((lesson, index) => (
-
+            {chapter.lessons.map((lesson, i) => (
               <div className="flex flex-row items-center justify-around">
                 {/* right div dot dot */}
                 <div className="flex items-center relative flex-col " style={{ width: "10%",transform: "translateY(30px)" }}>
                   <div className={`flex justify-center items-center w-4 h-4 rounded-full 
-                    ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}
+                    ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
+                    ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
                   `}
-                    style={{
-                      // backgroundColor: lesson.currentStep = true ? "yellow" : "pink",
+                  >
+                  </div>
+                  <span className="w-1" style={{
+                        borderRight: "2px dotted yellow", transform: "translateX(-1px)",height:"65px"
                     }}
-                  ></div>
-                  <span className="w-1"
-                  style={{
-                    // borderColor:
-                    // lesson.currentStep = true ? "2px dotted yellow" : "2px dotted pink",
-                      borderRight: "2px dotted yellow", transform: "translateX(-1px)",height:"65px"
-                  }}
                   ></span>
                 </div>
                 {/* left div content  */}
@@ -99,25 +94,25 @@ CourseChapter.defaultProps = {
           title: "آیا گوگل از ما دزدی میکند؟",
           duration: "14:30",
           play: "پخش",
-          // step : true,
+          passed : true,
         },
         { 
           title: "چگونگی ساخت نیروگاه های برقی", 
           duration: "22:31", 
           play: "در حال پخش",
-          // step : false,
+          passed : true,
         },
         { 
           title: "آیا از اینترنت می توان درآمد داشت؟", 
           duration: "10:09", 
           play: "نمایش",
-          // step : false,
+          passed : false,
         },
         {  
           title: "زمین سبز و آسمان آبی", 
           duration: "56:09", 
           play: "نمایش",
-          // step : false,        
+          passed : false,        
         },
       ],
     },