From d10f1431fb36fb805e144940be4ad39d71a9330e Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Tue, 25 Jan 2022 06:51:09 +0330
Subject: [PATCH 1/3] update

---
 src/App.js                            | 4 ++--
 src/components/CourseChapter/index.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 519e23a..3778b76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -57,14 +57,14 @@ function App() {
         {/* <ContactInfoSection /> */}
         {/* <FooterDesign1 /> */}
         {/* <Testttt /> */}
-        <Design2D />
+        {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
+        {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js
index 97ea0a4..34bdece 100644
--- a/src/components/CourseChapter/index.js
+++ b/src/components/CourseChapter/index.js
@@ -4,7 +4,7 @@ const CourseChapter = ({ chapters }) => {
   return (
     <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
       <div
-        className="rounded py-5 px-4"
+        className="rounded py-5 px-4 relative"
         style={{ backgroundColor: "#196EC033" }}
       >
         {/* top */}
@@ -54,6 +54,7 @@ const CourseChapter = ({ chapters }) => {
             ))}
           </div>
         ))}
+        <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
       </div>
     </section>
   );

From c7d7fde54f764de6695716e804e25f4fbd3282bf Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Tue, 25 Jan 2022 11:35:02 +0330
Subject: [PATCH 2/3] update

---
 src/App.js                            |  2 +-
 src/components/CourseChapter/index.js | 89 +++++++++++++++++++++------
 2 files changed, 71 insertions(+), 20 deletions(-)

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() {
         {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
-        {/* <ProductImage /> */}
+        <ProductImage />
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
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 (
     <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
       <div
@@ -20,40 +22,65 @@ const CourseChapter = ({ chapters }) => {
         {/* divider */}
         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
         {/* course title */}
-        {chapters.map((chapter, index) => (
+        {chapters.map((chapter, i) => (
           <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) => (
-              <div className="flex flex-row items-center justify-around mt-3">
+
+              <div className="flex flex-row items-center justify-around">
                 {/* right div dot dot */}
-                <div className="bg-yellow-100" style={{ width: "10%" }}>
-                  mahdi
+                <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"}
+                  `}
+                    style={{
+                      // backgroundColor: lesson.currentStep = true ? "yellow" : "pink",
+                    }}
+                  ></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  */}
-                <div style={{ width: "80%" }}>
+                <div className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
+                  ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
+                  style={{ width: "80%" }}
+                  onClick={() =>setSelectedLesson(lesson)}
+                >
                   {/* top */}
-                  <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-tr-md rounded-tl-md">
-                    <div className="flex flex-row items-center justify-between">
-                      <p className="text-sm text-blue-500">{lesson.title}</p>
-                      <span className="text-xs text-blue-500">
-                        {lesson.duration}
-                      </span>
-                    </div>
-                  </div>
-                  {/* bottom */}
-                  <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md">
-                    <span className="text-xs text-center text-blue-500">
-                      {lesson.play}
+                  <div className="flex flex-row items-center justify-between p-2">
+                    <p className={`text-sm text-blue-500 group-hover:text-white
+                      ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                    >
+                      {lesson.title}
+                    </p>
+                    <span className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
+                    ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                    >
+                      {lesson.duration}
                     </span>
                   </div>
+                  {/* divider */}
+                  <div className={`border-t border-blue-600 group-hover:border-white ${selectedLesson === lesson ? "border-red-600" : ""}`}></div>
+                  {/* bottom */}
+                  <span className={`text-xs text-center text-blue-500 group-hover:text-white p-2
+                  ${selectedLesson === lesson ? "text-red-600" : ""}`}>
+                    {lesson.play}
+                  </span>
                 </div>
               </div>
             ))}
           </div>
         ))}
+        {/* blue left border */}
         <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
       </div>
     </section>
@@ -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,        
+        },
       ],
     },
   ],
+
 };

From 2609590cd377ed1e77e75d2729261ecfb3ad7bd0 Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Tue, 25 Jan 2022 12:07:05 +0330
Subject: [PATCH 3/3] course component added

---
 src/App.js                            | 10 ++++-----
 src/components/CourseChapter/index.js | 29 +++++++++++----------------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index 15939d6..4a94e49 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js
index 983d2d4..5a73748 100644
--- a/src/components/CourseChapter/index.js
+++ b/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,        
         },
       ],
     },