update src/components/Accordion/AccordionDesign1/index.js and src/components/Code/index.js

src/components/Accordion/AccordionDesign1/index.js

@@ -3,9 +3,9 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import Button from "../../ButtonDesign/Button";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 
-const AccordionDesign1 = ({ courses, vod }) => {
+const AccordionDesign1 = ({ items, vod }) => {
   const [activeAccordion, setActiveAccordion] = useState(null);
-  const [accordions, updateAccordion] = useState(courses);
+  const [accordions, updateAccordion] = useState(items);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
@@ -18,20 +18,19 @@ const AccordionDesign1 = ({ courses, vod }) => {
   }
 
   return (
-    <>
     <DragDropContext onDragEnd={handleOnDragEnd}>
-        <Droppable droppableId="accordions">
+      <Droppable droppableId="container">
         {(provided) => (
           <section
             className="w-full flex flex-col bg-gray-200"
             {...provided.droppableProps}
             ref={provided.innerRef}
-              id="accordions"
+            id="container"
           >
-              {courses.map((course, index) => (
+            {items.map((item, index) => (
               <Draggable
-                  key={course.id}
-                  draggableId={"e" + course.id}
+                key={item.id}
+                draggableId={"e" + item.id}
                 index={index}
               >
                 {(provided) => (
@@ -48,37 +47,37 @@ const AccordionDesign1 = ({ courses, vod }) => {
                     {/* parent */}
                     <div
                       className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                          activeAccordion === course
+                        activeAccordion === item
                           ? "border-surfaceBorder "
                           : "border-secondary"
                       } cursor-pointer`}
                       onClick={() =>
                         setActiveAccordion(
-                            activeAccordion === course ? null : course
+                          activeAccordion === item ? null : item
                         )
                       }
                     >
                       <CircleInCircle
-                          parentClassName={"bg-secondary w-4 h-4 "}
+                        parentClassName={"bg-secondary w-0 h- "}
                         childClassName={false}
                       />
-                        <h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
+                      <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
                       {vod && (
                         <div className="flex flex-row items-center ml-5 ">
                           <p className="text-xs">
                             دقیقه:
-                              <span>{course.min}</span>
+                            <span>{item.min}</span>
                           </p>
                           <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
                           <p className="text-xs">
                             ویدیو:
-                              <span>{course.video}</span>
+                            <span>{item.video}</span>
                           </p>
                         </div>
                       )}
                       <img
                         src={
-                            activeAccordion === course
+                          activeAccordion === item
                             ? `images/accordion-.svg`
                             : `images/accordion+.svg`
                         }
@@ -87,8 +86,8 @@ const AccordionDesign1 = ({ courses, vod }) => {
                       />
                     </div>
                     {/* child */}
-                      {activeAccordion === course &&
-                        course.lessons.map((lesson, i) => (
+                    {activeAccordion === item &&
+                      item.subItems.map((subItem, i) => (
                         <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out">
                           <div className="flex flex-row items-center">
                             {vod === !true && (
@@ -107,14 +106,14 @@ const AccordionDesign1 = ({ courses, vod }) => {
                             </span>
                           </div>
                           <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
-                            <p className="text-sm flex-1">{lesson.name}</p>
+                          <p className="text-sm flex-1">{subItem.name}</p>
                           <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
                             {vod ? (
                               <>
                                 <div className="flex flex-row items-center ml-7">
                                   <p className="text-xs">
                                     دقیقه:
-                                      <span>{course.min}</span>
+                                    <span>{item.min}</span>
                                   </p>
                                   <Button
                                     className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
@@ -148,7 +147,6 @@ const AccordionDesign1 = ({ courses, vod }) => {
         )}
       </Droppable>
     </DragDropContext>
-    </>
   );
 };
 
@@ -157,13 +155,13 @@ export default AccordionDesign1;
 AccordionDesign1.defaultProps = {
   vod: false,
 
-  courses: [
+  items: [
     {
       title:
         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
       video: 4,
       min: 30,
-      lessons: [
+      subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },
@@ -177,10 +175,11 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
       video: 4,
       min: 30,
-      lessons: [
+
+      subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },
@@ -194,10 +193,10 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
       video: 4,
       min: 30,
-      lessons: [
+      subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },
@@ -211,20 +210,3 @@ AccordionDesign1.defaultProps = {
     },
   ],
 };
-
-{
-  /* monaco */
-}
-
-// import MonacoEditor from "react-monaco-editor";‍
-
-// <MonacoEditor
-//   width="800"
-//   height="600"
-//   language="javascript"
-//   theme="vs-dark"
-//   value={code}
-//   options={options}
-//   onChange={::this.onChange}
-//   editorDidMount={::this.editorDidMount}
-// />

src/components/Code/index.js

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import copyIcon from "./copy.png";
-import MonacoEditor from "react-monaco-editor";
 
 function Code({ code }) {
   const [copied, setCopied] = useState(false);
@@ -14,7 +13,6 @@ function Code({ code }) {
     /* Copy the text inside the text field */
     navigator.clipboard.writeText(copyText);
   };
-
   return (
     <div className="flex flex-col w-full my-10">
       <div className="w-full flex flex-row items-center justify-between">