build(deps): update package.json, src/components/Accordion/AccordionDesign1/index.js, src/components/CardDesgin/CardDesign2/index.js and yarn.lock

package.json

@@ -36,6 +36,7 @@
     "react-input-range": "^1.3.0",
     "react-leaflet": "^3.2.5",
     "react-leaflet-draw": "^0.19.8",
+    "react-monaco-editor": "^0.48.0",
     "react-multi-date-picker": "^3.3.0",
     "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.6",

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 = ({ items, vod }) => {
+const AccordionDesign1 = ({ courses, vod }) => {
   const [activeAccordion, setActiveAccordion] = useState(null);
-  const [accordions, updateAccordion] = useState(items);
+  const [accordions, updateAccordion] = useState(courses);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
@@ -19,18 +19,18 @@ const AccordionDesign1 = ({ items, vod }) => {
 
   return (
     <DragDropContext onDragEnd={handleOnDragEnd}>
-      <Droppable droppableId="container">
+      <Droppable droppableId="accordions">
         {(provided) => (
           <section
             className="w-full flex flex-col bg-gray-200"
             {...provided.droppableProps}
             ref={provided.innerRef}
-            id="container"
+            id="accordions"
           >
-            {items.map((item, index) => (
+            {courses.map((course, index) => (
               <Draggable
-                key={item.id}
-                draggableId={"e" + item.id}
+                key={course.id}
+                draggableId={"e" + course.id}
                 index={index}
               >
                 {(provided) => (
@@ -47,13 +47,13 @@ const AccordionDesign1 = ({ items, vod }) => {
                     {/* parent */}
                     <div
                       className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                        activeAccordion === item
+                        activeAccordion === course
                           ? "border-surfaceBorder "
                           : "border-secondary"
                       } cursor-pointer`}
                       onClick={() =>
                         setActiveAccordion(
-                          activeAccordion === item ? null : item
+                          activeAccordion === course ? null : course
                         )
                       }
                     >
@@ -61,23 +61,23 @@ const AccordionDesign1 = ({ items, vod }) => {
                         parentClassName={"bg-secondary w-4 h-4 "}
                         childClassName={false}
                       />
-                      <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
+                      <h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
                       {vod && (
                         <div className="flex flex-row items-center ml-5 ">
                           <p className="text-xs">
                             دقیقه:
-                            <span>{item.min}</span>
+                            <span>{course.min}</span>
                           </p>
                           <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
                           <p className="text-xs">
                             ویدیو:
-                            <span>{item.video}</span>
+                            <span>{course.video}</span>
                           </p>
                         </div>
                       )}
                       <img
                         src={
-                          activeAccordion === item
+                          activeAccordion === course
                             ? `images/accordion-.svg`
                             : `images/accordion+.svg`
                         }
@@ -86,8 +86,8 @@ const AccordionDesign1 = ({ items, vod }) => {
                       />
                     </div>
                     {/* child */}
-                    {activeAccordion === item &&
-                      item.subItems.map((subItem, i) => (
+                    {activeAccordion === course &&
+                      course.lessons.map((lesson, 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 && (
@@ -106,14 +106,14 @@ const AccordionDesign1 = ({ items, vod }) => {
                             </span>
                           </div>
                           <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
-                          <p className="text-sm flex-1">{subItem.name}</p>
+                          <p className="text-sm flex-1">{lesson.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>{item.min}</span>
+                                    <span>{course.min}</span>
                                   </p>
                                   <Button
                                     className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
@@ -155,13 +155,13 @@ export default AccordionDesign1;
 AccordionDesign1.defaultProps = {
   vod: false,
 
-  items: [
+  courses: [
     {
       title:
         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
       video: 4,
       min: 30,
-      subItems: [
+      lessons: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },
@@ -175,11 +175,10 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
       video: 4,
       min: 30,
-
-      subItems: [
+      lessons: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },
@@ -193,10 +192,10 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
       video: 4,
       min: 30,
-      subItems: [
+      lessons: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
         },