update App.js and src/components/Accordion/index.js

src/App.js

@@ -1,5 +1,4 @@
 import "./App.scss";
-import Accordion from "./components/Accordion";
 import Card from "./components/Card";
 
 function App() {

src/components/Accordion/index.js

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import CircleInCircle from "../CircleInCircle";
-import Button from "../Button";
 
 const finalSpaceCharacters = [
   {
@@ -11,6 +9,17 @@ const finalSpaceCharacters = [
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
     video: 4,
     min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
     id: "garfdsy",
@@ -19,20 +28,83 @@ const finalSpaceCharacters = [
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
     video: 4,
     min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
     id: "kvn",
     name: "KVN",
+    thumb: "/images/kvn.png",
     test: "mahdi",
     title:
       "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
     video: 4,
     min: 30,
+
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
+  },
+  {
+    id: "mooncake",
+    name: "Mooncake",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+    title:
+      "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
+  },
+  {
+    id: "garfsddsfy",
+    test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
 ];
 
 function Accordion({ vod }) {
-  // const [activeAccordion, setActiveAccordion] = useState(null);
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
@@ -69,22 +141,21 @@ function Accordion({ vod }) {
                         <img
                           src="images/blue-hamburger-menu.jpeg"
                           alt=""
-                          class="w-4 ml-2"
+                          className="w-4 ml-2"
                         />
                         <div className="w-full flex flex-row items-center justify-between px-3 py-4 bg-blue-200 cursor-pointer">
-                          <h2 className="flex-1 mr-5 text-sm text-pink-400">
+                          <p className="flex-1 mr-3 text-sm text-blue-700">
                             {item.title}
-                          </h2>
-                          <div className="bg-blue-800 p-2">
+                          </p>
+                          <div className="bg-blue-300 p-2 rounded-sm">
                             <img
-                              src="images/blue-cancle-icon.png"
+                              src="images/blue-cancle-icon.svg"
                               alt=""
-                              class="w-3 "
+                              className="w-3 "
                             />
                           </div>
                         </div>
                       </div>
-
                       {provided.placeholder}
                     </div>
                   )}