From 6092ba0c1bd4e90fb7ad197781aa2729a179f10b Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Mon, 24 Jan 2022 14:56:22 +0330
Subject: [PATCH] update

---
 src/App.js                            |  4 ++-
 src/components/CourseChapter/index.js | 42 +++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CourseChapter/index.js

diff --git a/src/App.js b/src/App.js
index d11851b..8659291 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,6 +33,7 @@ import ProductStatusCard from "./components/ProductStatusCard";
 import AdvertisementDesign1 from "./components/Advertisement/design1";
 import AdvertisementDesign2 from "./components/Advertisement/design2";
 import AdvertisementDesign3 from "./components/Advertisement/design3";
+import CourseChapter from "./components/CourseChapter";
 
 function App() {
   return (
@@ -56,7 +57,7 @@ function App() {
         {/* <ContactInfoSection /> */}
         {/* <FooterDesign1 /> */}
         {/* <Testttt /> */}
-        {/* <Design2D /> */}
+        <Design2D />
         {/* <Features /> */}
         {/* <Feedback /> */}
         {/* <Alert /> */}
@@ -68,6 +69,7 @@ function App() {
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
+        <CourseChapter />
       </div>
     </Provider>
   );
diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js
new file mode 100644
index 0000000..43c858e
--- /dev/null
+++ b/src/components/CourseChapter/index.js
@@ -0,0 +1,42 @@
+import React from "react";
+
+const CourseChapter = () => {
+  return (
+    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
+      <div
+        className="rounded py-2 px-4"
+        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 */}
+        <div className="bg-blue-800 rounded">
+          <h2>فصل اول: مباحث جوشش مواد مذاب در مرکز</h2>
+          <p>2:30:13</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CourseChapter;
+
+CourseChapter.defaultProps = {
+  chapters: [
+    {
+      title: "",
+      duration: "",
+      lessons: [{ title: "", duration: "", play: "" }],
+    },
+  ],
+};