Pedram Fixed Course Chapter (Version 1.0.0)

src/components/CourseChapter/index.css

@@ -0,0 +1,16 @@
+.hasScrollbar::-webkit-scrollbar {
+  width:7.5px;
+  background-color: rgba(0,0,0,0.08);
+  border-radius: 5px;
+  height: 50px;
+  margin-top: 200px;
+} 
+
+.hasScrollbar::-webkit-scrollbar-thumb{
+  background:#196EC0;
+  border-radius: 10px;
+}
+.hasScrollbar::-webkit-scrollbar-track {
+  
+  border-radius: 10px;
+}

src/components/CourseChapter/index.js

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
+import './index.css';
 
 const CourseChapter = ({ chapters }) => {
   const [selectedLesson, setSelectedLesson] = useState(null);
 
   return (
-    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
+    <section style={{ width: "40%" }} className="bg-white mx-auto my-20 p-4">
       <div
         className="rounded py-5 px-4 relative"
-        style={{ backgroundColor: "#196EC033" }}
+        style={{ backgroundColor: "#196EC033", height: '500px'}}
       >
         {/* top */}
         <div className="flex flex-row items-center justify-between">
@@ -22,6 +23,9 @@ const CourseChapter = ({ chapters }) => {
         {/* divider */}
         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
         {/* course title */}
+        <div className="overflow-y-scroll hasScrollbar"  style={{
+          height: '430px'
+        }}>
         {chapters.map((chapter, index) => (
           <div className="flex flex-col" key={index}>
             <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
@@ -31,7 +35,7 @@ const CourseChapter = ({ chapters }) => {
             {/* course lessons */}
             {chapter.lessons.map((lesson, i) => (
               <div
-                className="flex flex-row items-center justify-around"
+                className="flex flex-row items-center  justify-around"
                 key={i}
               >
                 {/* right div dot dot */}
@@ -42,13 +46,13 @@ const CourseChapter = ({ chapters }) => {
                   <div
                     className={`flex justify-center items-center w-4 h-4 rounded-full 
                     ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
-                    ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
+                    ${lesson.passed ? "bg-blue-600" : "bg-gray-400"}
                   `}
                   ></div>
                   <span
                     className="w-1"
                     style={{
-                      borderRight: "2px dotted yellow",
+                      borderRight: "2px dashed #86A0B9",
                       transform: "translateX(-1px)",
                       height: "65px",
                     }}
@@ -56,22 +60,22 @@ const CourseChapter = ({ chapters }) => {
                 </div>
                 {/* left div content  */}
                 <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" : ""}`}
+                  className={`mt-2 bg-white border border-blue-300 flex flex-col border border-solid cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
+                  ${selectedLesson === lesson ? "bg-blue-600 text-white-700" : "text-blue-500"}`}
                   style={{ width: "80%" }}
                   onClick={() => setSelectedLesson(lesson)}
                 >
                   {/* top */}
-                  <div className="flex flex-row items-center justify-between p-2">
+                  <div className="flex flex-row items-center justify-between p-4 border-0 border-b border-solid border-blue-500">
                     <p
-                      className={`text-sm text-blue-500 group-hover:text-white
-                      ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                      className={`text-sm group-hover:text-white
+                      ${selectedLesson === lesson ? "text-white" : ""}`}
                     >
                       {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" : ""}`}
+                      className={`text-xs group-hover:text-white border-r border-blue-200 pr-1
+                    ${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
                     >
                       {lesson.duration}
                     </span>
@@ -84,8 +88,8 @@ const CourseChapter = ({ chapters }) => {
                   ></div>
                   {/* bottom */}
                   <span
-                    className={`text-xs text-center text-blue-500 group-hover:text-white p-2
-                  ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                    className={`text-xs text-center  group-hover:text-white p-2
+                  ${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
                   >
                     {lesson.play}
                   </span>
@@ -94,6 +98,7 @@ const CourseChapter = ({ chapters }) => {
             ))}
           </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>
@@ -133,6 +138,24 @@ CourseChapter.defaultProps = {
           play: "نمایش",
           passed: false,
         },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
       ],
     },
   ],