course cha[ter component added

src/App.js

@@ -64,7 +64,7 @@ function App() {
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        {/* <ProductTab /> */}
+        <ProductTab />
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}

src/components/CourseChapter/index.js

@@ -1,10 +1,10 @@
 import React from "react";
 
-const CourseChapter = () => {
+const CourseChapter = ({ chapters }) => {
   return (
     <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
       <div
-        className="rounded py-2 px-4"
+        className="rounded py-5 px-4"
         style={{ backgroundColor: "#196EC033" }}
       >
         {/* top */}
@@ -20,10 +20,40 @@ const CourseChapter = () => {
         {/* divider */}
         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
         {/* course title */}
-        <div className="bg-blue-800 rounded">
-          <h2>فصل اول: مباحث جوشش مواد مذاب در مرکز</h2>
-          <p>2:30:13</p>
-        </div>
+        {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>
+            {chapter.lessons.map((lesson, index) => (
+              <div className="flex flex-row items-center justify-around mt-3">
+                {/* right div dot dot */}
+                <div className="bg-yellow-100" style={{ width: "10%" }}>
+                  mahdi
+                </div>
+                {/* left div content  */}
+                <div style={{ width: "80%" }}>
+                  {/* 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}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
       </div>
     </section>
   );
@@ -34,9 +64,11 @@ export default CourseChapter;
 CourseChapter.defaultProps = {
   chapters: [
     {
-      title: "",
-      duration: "",
-      lessons: [{ title: "", duration: "", play: "" }],
+      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
+      duration: "2:30:13",
+      lessons: [
+        { title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" },
+      ],
     },
   ],
 };