update 2 files and delete 1 file

src/components/CounterDesign/Counter/index.js

@@ -12,9 +12,7 @@ const Counter = ({ incrementIcon, decrementIcon, flex }) => {
         onClick={() => setCount(count + 1)}
       />
       <span
-        className={`text-2xl font-sansbold ${
+        className={`font-sansbold ${flex === "flex-col" ? "my-2" : "mx-2"}`}
-          flex === "flex-col" ? "my-2" : "mx-2"
-        }`}
         // style={count > 0 ? { color: "green" } : { color: "red" }}
         style={
           count > -1

src/components/CourseChapter/index.js

@@ -1,141 +0,0 @@
-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
-        className="rounded py-5 px-4 relative"
-        style={{ backgroundColor: "#196EC033" }}
-      >
-        {/* top */}
-        <div className="flex flex-row items-center justify-between">
-          <div>
-            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
-          </div>
-          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
-            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
-            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
-          </div>
-        </div>
-        {/* divider */}
-        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
-        {/* course title */}
-        {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">
-              <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, i) => (
-              <div
-                className="flex flex-row items-center justify-around"
-                key={i}
-              >
-                {/* 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"},
-                    ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
-                  `}
-                  ></div>
-                  {Number(i) !== chapter.lessons.length - 1 && (
-                    <span
-                      className="w-1"
-                      style={{
-                        borderRight: "2px dotted yellow",
-                        transform: "translateX(-1px)",
-                        height: "65px",
-                      }}
-                    ></span>
-                  )}
-                </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" : ""}`}
-                  style={{ width: "80%" }}
-                  onClick={() => setSelectedLesson(lesson)}
-                >
-                  {/* top */}
-                  <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>
-  );
-};
-
-export default CourseChapter;
-
-CourseChapter.defaultProps = {
-  chapters: [
-    {
-      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
-      duration: "2:30:13",
-      lessons: [
-        {
-          title: "آیا گوگل از ما دزدی میکند؟",
-          duration: "14:30",
-          play: "پخش",
-          passed: true,
-        },
-        {
-          title: "چگونگی ساخت نیروگاه های برقی",
-          duration: "22:31",
-          play: "در حال پخش",
-          passed: true,
-        },
-        {
-          title: "آیا از اینترنت می توان درآمد داشت؟",
-          duration: "10:09",
-          play: "نمایش",
-          passed: false,
-        },
-        {
-          title: "زمین سبز و آسمان آبی",
-          duration: "56:09",
-          play: "نمایش",
-          passed: false,
-        },
-      ],
-    },
-  ],
-};

src/components/CourseList/index.js

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
+  const [selectedLesson, setSelectedLesson] = useState(null);
+
+  return (
+    <div className="relative p-4 bg-[#196EC033] rounded">
+      {/* top */}
+      <div className="flex flex-row items-center justify-between">
+        <h2 className="text-blue-800 text-base">{courseTitle}</h2>
+        <div className="flex flex-row-reverse items-center divide-x">
+          <span className="text-blue-800 text-sm px-2">{lessonName}</span>
+          <span className="text-blue-800 text-sm px-2">{grade}</span>
+        </div>
+      </div>
+      {/* divider */}
+      <div className="border-b border-blue-300 my-5"></div>
+      {/* course title */}
+      {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">
+            <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, i) => (
+            <div className="flex flex-row items-center justify-around" key={i}>
+              {/* right div dot dot */}
+              <div
+                className={`flex items-center relative flex-col mx-5 transform  ${
+                  Number(i) === chapter.lessons.length - 1
+                    ? "translate-y-0"
+                    : "translate-y-[35px]"
+                }`}
+              >
+                <div
+                  className={`w-4 h-4 flex justify-center items-center rounded-full 
+                ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
+                ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
+              `}
+                ></div>
+                {Number(i) !== chapter.lessons.length - 1 && (
+                  <span
+                    className="w-1"
+                    style={{
+                      borderRight: "2px dotted yellow",
+                      transform: "translateX(-1px)",
+                      height: "65px",
+                    }}
+                  ></span>
+                )}
+              </div>
+              {/* left div content  */}
+              <div
+                className={`group flex-1 flex flex-col mt-2 bg-white hover:bg-blue-600 border border-blue-600 rounded-md cursor-pointer transition duration-200 ease-in-out   
+              ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
+                onClick={() => setSelectedLesson(lesson)}
+              >
+                {/* top */}
+                <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>
+      ))}
+    </div>
+  );
+};
+
+export default CourseChapter;
+
+CourseChapter.defaultProps = {
+  courseTitle: "سرفصل دوره",
+  lessonName: "علوم تجربی",
+  grade: "پایه ششم",
+
+  chapters: [
+    {
+      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
+      duration: "2:30:13",
+      lessons: [
+        {
+          title: "آیا گوگل از ما دزدی میکند؟",
+          duration: "14:30",
+          play: "پخش",
+          passed: true,
+        },
+        {
+          title: "چگونگی ساخت نیروگاه های برقی",
+          duration: "22:31",
+          play: "در حال پخش",
+          passed: true,
+        },
+        {
+          title: "آیا از اینترنت می توان درآمد داشت؟",
+          duration: "10:09",
+          play: "نمایش",
+          passed: false,
+        },
+        {
+          title: "زمین سبز و آسمان آبی",
+          duration: "56:09",
+          play: "نمایش",
+          passed: false,
+        },
+      ],
+    },
+  ],
+};

src/redux/data.js

@@ -12,6 +12,7 @@ import ProgressBar from "../components/ProgressBar";
 import Checkbox from "../components/Checkbox";
 import CommentDesign from "../components/CommentDesign";
 import CounterDesign from "../components/CounterDesign";
+import CourseList from "../components/CourseList";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -238,7 +239,7 @@ const components = [
   },
   {
     name: "Counter Design",
-    author: "Ashrafi",
+    author: "Andalib",
     props: [],
     content: {
       name: "Counter Design",
@@ -246,6 +247,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Course List",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Course List",
+      component: <CourseList />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",