From 4abb7ad24f3279073f825ad76fa9af5dae12ee2a Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Tue, 31 May 2022 15:19:14 +0430
Subject: [PATCH] update src/components/Accordion/AccordionDesign1/index.js,
 src/components/Testt/index.js and mahdi.js

---
 .../Accordion/AccordionDesign1/index.js       | 366 ++++++++++------
 src/components/Testt/index.js                 | 158 ++++---
 src/components/Testt/mahdi.js                 | 409 +++++++-----------
 3 files changed, 488 insertions(+), 445 deletions(-)

diff --git a/src/components/Accordion/AccordionDesign1/index.js b/src/components/Accordion/AccordionDesign1/index.js
index 85c2d8b..5a3a373 100644
--- a/src/components/Accordion/AccordionDesign1/index.js
+++ b/src/components/Accordion/AccordionDesign1/index.js
@@ -1,159 +1,255 @@
 import React, { useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import Button from "../../ButtonDesign/Button";
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 
-const AccordionDesign1 = ({ items, vod }) => {
+const finalSpaceCharacters = [
+  {
+    id: "gary",
+    test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
+  },
+  {
+    id: "garfdsy",
+    test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    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 AccordionDesign1({ vod }) {
   const [activeAccordion, setActiveAccordion] = useState(null);
-  const [accordions, updateAccordion] = useState(items);
+  const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
 
-    const items = Array.from(accordions);
+    const items = Array.from(characters);
     const [reorderedItem] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, reorderedItem);
 
-    updateAccordion(items);
+    updateCharacters(items);
   }
 
   return (
-    <DragDropContext onDragEnd={handleOnDragEnd}>
-      <Droppable droppableId="container">
-        {(provided) => (
-          <section
-            className="w-full flex flex-col bg-gray-200"
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            id="container"
-          >
-            {items.map((item, index) => (
-              <Draggable
-                key={item.id}
-                draggableId={"e" + item.id}
-                index={index}
-              >
-                {(provided) => (
-                  <div
-                    className="flex flex-col"
-                    key={index}
-                    props={{
-                      ref: provided.innerRef,
-                      ...provided.draggableProps,
-                      ...provided.dragHandleProps,
-                    }}
-                    style={provided.draggableProps.style}
-                  >
-                    {/* parent */}
+    <section className="w-full">
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="characters">
+          {(provided) => (
+            <section
+              className="characters w-full flex flex-col bg-gray-200"
+              id="container"
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {characters.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided) => (
                     <div
-                      className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                        activeAccordion === item
-                          ? "border-surfaceBorder "
-                          : "border-secondary"
-                      } cursor-pointer`}
-                      onClick={() =>
-                        setActiveAccordion(
-                          activeAccordion === item ? null : item
-                        )
-                      }
+                      className="flex flex-col"
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
                     >
-                      <CircleInCircle
-                        parentClassName={"bg-secondary w-0 h- "}
-                        childClassName={false}
-                      />
-                      <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>{item.min}</span>
-                          </p>
-                          <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                          <p className="text-xs">
-                            ویدیو:
-                            <span>{item.video}</span>
-                          </p>
-                        </div>
-                      )}
-                      <img
-                        src={
-                          activeAccordion === item
-                            ? `images/accordion-.svg`
-                            : `images/accordion+.svg`
+                      {/* parent */}
+                      <div
+                        onClick={() =>
+                          setActiveAccordion(
+                            activeAccordion === item ? null : item
+                          )
                         }
-                        alt=""
-                        class="w-3 ml-2"
-                      />
+                        className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+                          activeAccordion === item
+                            ? "border-surfaceBorder "
+                            : "border-secondary"
+                        }  cursor-pointer`}
+                      >
+                        <CircleInCircle
+                          parentClassName={"bg-secondary w-0 h- "}
+                          childClassName={false}
+                        />
+                        <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>{item.min}</span>
+                            </p>
+                            <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                            <p className="text-xs">
+                              ویدیو:
+                              <span>{item.video}</span>
+                            </p>
+                          </div>
+                        )}
+                        <img
+                          src={
+                            activeAccordion === item
+                              ? `images/accordion-.svg`
+                              : `images/accordion+.svg`
+                          }
+                          alt=""
+                          class="w-3 ml-2"
+                        />
+                      </div>{" "}
+                      {/* child */}
+                      {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 && (
+                                <img
+                                  src="images/accordionGroup2725.svg"
+                                  className="w-3"
+                                  alt="line"
+                                />
+                              )}
+                              <span
+                                className={`text-sm ${
+                                  vod === true ? "mr-0" : "mr-3"
+                                }`}
+                              >
+                                {i + 1}
+                              </span>
+                            </div>
+                            <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
+                            <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>{item.min}</span>
+                                    </p>
+                                    <Button
+                                      className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
+                                      text={"پخش"}
+                                    />
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <img
+                                    src="images/accordionGroup2724.svg"
+                                    className="w-8 rounded"
+                                    alt="delete-button"
+                                  />
+                                  <img
+                                    src="images/accordionGroup2723.svg"
+                                    className="w-8 rounded"
+                                    alt="edit-button"
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      {provided.placeholder}
                     </div>
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Draggable>
-            ))}
-          </section>
-        )}
-      </Droppable>
-    </DragDropContext>
+                  )}
+                </Draggable>
+              ))}
+
+              {provided.placeholder}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </section>
   );
-};
+}
 
 export default AccordionDesign1;
-
 AccordionDesign1.defaultProps = {
-  vod: false,
-
-  items: [
-    {
-      title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
-      video: 4,
-      min: 30,
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-    {
-      title:
-        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
-      video: 4,
-      min: 30,
-
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-    {
-      title:
-        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
-      video: 4,
-      min: 30,
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-  ],
+  vod: true,
 };
diff --git a/src/components/Testt/index.js b/src/components/Testt/index.js
index b45fb73..fa1a770 100644
--- a/src/components/Testt/index.js
+++ b/src/components/Testt/index.js
@@ -7,8 +7,6 @@ import Button from "../ButtonDesign/Button";
 const finalSpaceCharacters = [
   {
     id: "gary",
-    name: "Gary Goodspeed",
-    thumb: "/images/kvn.png",
     test: "mahdi",
     title:
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@@ -28,8 +26,6 @@ const finalSpaceCharacters = [
   },
   {
     id: "garfdsy",
-    name: "Gary Goodspeed",
-    thumb: "/images/kvn.png",
     test: "mahdi",
     title:
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@@ -92,8 +88,6 @@ const finalSpaceCharacters = [
   },
   {
     id: "garfsddsfy",
-    name: "Gary Goodspeed",
-    thumb: "/images/kvn.png",
     test: "mahdi",
     title:
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@@ -138,55 +132,115 @@ function Testt({ vod }) {
               {...provided.droppableProps}
               ref={provided.innerRef}
             >
-              {characters.map(
-                ({ id, name, thumb, test, title, video, min }, index) => {
-                  return (
-                    <Draggable key={id} draggableId={id} index={index}>
-                      {(provided) => (
-                        <>
-                          {/* ! mineeeeeeeeeeeeee */}
-                          <div
-                            className="flex flex-col"
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                          >
-                            {/* parent */}
-                            <div
-                              className={`flex flex-row items-center justify-between px-3 py-4 border-b-2  cursor-pointer`}
-                            >
-                              <CircleInCircle
-                                parentClassName={"bg-secondary w-0 h- "}
-                                childClassName={false}
-                              />
-                              <h2 className="flex-1 mr-5 text-sm">{title}</h2>
-                              {vod && (
-                                <div className="flex flex-row items-center ml-5 ">
-                                  <p className="text-xs">
-                                    دقیقه:
-                                    <span>{min}</span>
-                                  </p>
-                                  <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                                  <p className="text-xs">
-                                    ویدیو:
-                                    <span>{video}</span>
-                                  </p>
-                                </div>
+              {characters.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided) => (
+                    <div
+                      className="flex flex-col"
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                    >
+                      {/* parent */}
+                      <div
+                        onClick={() =>
+                          setActiveAccordion(
+                            activeAccordion === item ? null : item
+                          )
+                        }
+                        className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+                          activeAccordion === item
+                            ? "border-surfaceBorder "
+                            : "border-secondary"
+                        }  cursor-pointer`}
+                      >
+                        <CircleInCircle
+                          parentClassName={"bg-secondary w-0 h- "}
+                          childClassName={false}
+                        />
+                        <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>{item.min}</span>
+                            </p>
+                            <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                            <p className="text-xs">
+                              ویدیو:
+                              <span>{item.video}</span>
+                            </p>
+                          </div>
+                        )}
+                        <img
+                          src={
+                            activeAccordion === item
+                              ? `images/accordion-.svg`
+                              : `images/accordion+.svg`
+                          }
+                          alt=""
+                          class="w-3 ml-2"
+                        />
+                      </div>{" "}
+                      {/* child */}
+                      {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 && (
+                                <img
+                                  src="images/accordionGroup2725.svg"
+                                  className="w-3"
+                                  alt="line"
+                                />
+                              )}
+                              <span
+                                className={`text-sm ${
+                                  vod === true ? "mr-0" : "mr-3"
+                                }`}
+                              >
+                                {i + 1}
+                              </span>
+                            </div>
+                            <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
+                            <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>{item.min}</span>
+                                    </p>
+                                    <Button
+                                      className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
+                                      text={"پخش"}
+                                    />
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <img
+                                    src="images/accordionGroup2724.svg"
+                                    className="w-8 rounded"
+                                    alt="delete-button"
+                                  />
+                                  <img
+                                    src="images/accordionGroup2723.svg"
+                                    className="w-8 rounded"
+                                    alt="edit-button"
+                                  />
+                                </>
                               )}
-                              <img
-                                src={"images/accordion-.svg"}
-                                alt=""
-                                class="w-3 ml-2"
-                              />
                             </div>
-                            {provided.placeholder}
                           </div>
-                        </>
-                      )}
-                    </Draggable>
-                  );
-                }
-              )}
+                        ))}
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+
               {provided.placeholder}
             </section>
           )}
diff --git a/src/components/Testt/mahdi.js b/src/components/Testt/mahdi.js
index fc75699..46e91e3 100644
--- a/src/components/Testt/mahdi.js
+++ b/src/components/Testt/mahdi.js
@@ -1,57 +1,115 @@
 import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import "./App.css";
-
 import CircleInCircle from "../MiniComponents/CircleInCircle";
 import Button from "../ButtonDesign/Button";
 
 const finalSpaceCharacters = [
   {
     id: "gary",
-    name: "Gary Goodspeed",
-    thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
-    id: "cato",
-    name: "Little Cato",
-    thumb: "/images/kvn.png",
+    id: "garfdsy",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    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: "quinn",
-    name: "Quinn Ergon",
-    thumb: "/images/kvn.png",
+    id: "garfsddsfy",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
 ];
 
-function Testt({ items, vod }) {
-  const [characters, updateCharacters] = useState(finalSpaceCharacters);
-  // const [characters, updateCharacters] = useState(items);
+function Testt({ vod }) {
   const [activeAccordion, setActiveAccordion] = useState(null);
-
-  // function handleOnDragEnd(result) {
-  //   if (!result.destination) return;
-
-  //   const items = Array.from(characters);
-  //   const [reorderedItem] = items.splice(result.source.index, 1);
-  //   items.splice(result.destination.index, 0, reorderedItem);
-
-  //   updateCharacters(items);
-  // }
+  const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
@@ -64,247 +122,82 @@ function Testt({ items, vod }) {
   }
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Final Space Characters</h1>
-        <DragDropContext onDragEnd={handleOnDragEnd}>
-          <Droppable droppableId="characters">
-            {(provided) => (
-              <section
-                className="w-full flex flex-col bg-gray-200"
-                {...provided.droppableProps}
-                ref={provided.innerRef}
-              >
-                {characters.map((item, { id, name }, index) => (
-                  <Draggable key={id} draggableId={id} index={index}>
-                    {(provided) => (
-                      <div
-                        key={index}
-                        className="flex flex-col"
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        {/* parent */}
+    <section>
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="characters">
+          {(provided) => (
+            <section
+              className="characters w-full flex flex-col bg-gray-200"
+              id="container"
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {characters.map(
+                ({ id, title, video, min, item, subItems, name }, index) => {
+                  return (
+                    <Draggable key={id} draggableId={id} index={index}>
+                      {(provided) => (
                         <div
-                          className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                            activeAccordion === item
-                              ? "border-surfaceBorder "
-                              : "border-secondary"
-                          } cursor-pointer`}
-                          onClick={() =>
-                            setActiveAccordion(
-                              activeAccordion === item ? null : item
-                            )
-                          }
+                          className="flex flex-col"
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
                         >
-                          <CircleInCircle
-                            parentClassName={"bg-secondary w-0 h- "}
-                            childClassName={false}
-                          />
-                          <h2 className="flex-1 mr-5 text-sm">{name}</h2>
-                          {vod && (
-                            <div className="flex flex-row items-center ml-5 ">
-                              <p className="text-xs">
-                                دقیقه:
-                                <span>{item.min}</span>
-                              </p>
-                              <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                              <p className="text-xs">
-                                ویدیو:
-                                <span>{item.video}</span>
-                              </p>
-                            </div>
-                          )}
-                          <img
-                            src={
-                              activeAccordion === item
-                                ? `images/accordion-.svg`
-                                : `images/accordion+.svg`
+                          {/* parent */}
+                          <div
+                            onClick={() =>
+                              setActiveAccordion(
+                                activeAccordion === item ? null : item
+                              )
                             }
-                            alt=""
-                            className="w-3 ml-2"
-                          />
+                            className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+                              activeAccordion === item
+                                ? "border-surfaceBorder "
+                                : "border-secondary"
+                            }  cursor-pointer`}
+                          >
+                            <CircleInCircle
+                              parentClassName={"bg-secondary w-0 h- "}
+                              childClassName={false}
+                            />
+                            <h2 className="flex-1 mr-5 text-sm">{title}</h2>
+                            {vod && (
+                              <div className="flex flex-row items-center ml-5 ">
+                                <p className="text-xs">
+                                  دقیقه:
+                                  <span>{min}</span>
+                                </p>
+                                <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                                <p className="text-xs">
+                                  ویدیو:
+                                  <span>{video}</span>
+                                </p>
+                              </div>
+                            )}
+                            <img
+                              src={
+                                activeAccordion === item
+                                  ? `images/accordion-.svg`
+                                  : `images/accordion+.svg`
+                              }
+                              alt=""
+                              class="w-3 ml-2"
+                            />
+                          </div>
+                          {provided.placeholder}
                         </div>
-                        {provided.placeholder}
-                      </div>
-                    )}
-                  </Draggable>
-                ))}
-              </section>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </header>
-      <p>
-        Images from{" "}
-        <a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
-          Final Space Wiki
-        </a>
-      </p>
-    </div>
+                      )}
+                    </Draggable>
+                  );
+                }
+              )}
+              {provided.placeholder}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </section>
   );
 }
 
 export default Testt;
-
-Testt.defaultProps = {
-  vod: false,
-
-  // items: [
-  //   {
-  //     id: "gary",
-  //     title:
-  //       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
-  //     video: 4,
-  //     min: 30,
-  //     subItems: [
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-  //       },
-  //       {
-  //         name: "شرکت های بزرگ خیلی خوب هستند",
-  //       },
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-  //       },
-  //     ],
-  //   },
-  //   {
-  //     id: "kevin",
-  //     title:
-  //       "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
-  //     video: 4,
-  //     min: 30,
-
-  //     subItems: [
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-  //       },
-  //       {
-  //         name: "شرکت های بزرگ خیلی خوب هستند",
-  //       },
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-  //       },
-  //     ],
-  //   },
-  //   {
-  //     id: "rafiqaneh",
-  //     title:
-  //       "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
-  //     video: 4,
-  //     min: 30,
-  //     subItems: [
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-  //       },
-  //       {
-  //         name: "شرکت های بزرگ خیلی خوب هستند",
-  //       },
-  //       {
-  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-  //       },
-  //     ],
-  //   },
-  // ],
-};
-
-// import React, { useState } from "react";
-// import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-// import "./App.css";
-
-// const finalSpaceCharacters = [
-//   {
-//     id: "gary",
-//     name: "Gary Goodspeed",
-//     thumb: "/images/kvn.png",
-//     test: "mahdi",
-//   },
-//   {
-//     id: "cato",
-//     name: "Little Cato",
-//     thumb: "/images/kvn.png",
-//     test: "mahdi",
-//   },
-//   {
-//     id: "kvn",
-//     name: "KVN",
-//     thumb: "/images/kvn.png",
-//     test: "mahdi",
-//   },
-//   {
-//     id: "mooncake",
-//     name: "Mooncake",
-//     thumb: "/images/kvn.png",
-//     test: "mahdi",
-//   },
-//   {
-//     id: "quinn",
-//     name: "Quinn Ergon",
-//     thumb: "/images/kvn.png",
-//     test: "mahdi",
-//   },
-// ];
-
-// function Testt() {
-//   const [characters, updateCharacters] = useState(finalSpaceCharacters);
-
-//   function handleOnDragEnd(result) {
-//     if (!result.destination) return;
-
-//     const items = Array.from(characters);
-//     const [reorderedItem] = items.splice(result.source.index, 1);
-//     items.splice(result.destination.index, 0, reorderedItem);
-
-//     updateCharacters(items);
-//   }
-
-//   return (
-//     <div className="App">
-//       <header className="App-header">
-//         <h1>Final Space Characters</h1>
-//         <DragDropContext onDragEnd={handleOnDragEnd}>
-//           <Droppable droppableId="characters">
-//             {(provided) => (
-//               <ul
-//                 className="characters"
-//                 {...provided.droppableProps}
-//                 ref={provided.innerRef}
-//               >
-//                 {characters.map(({ id, name, thumb, test }, index) => {
-//                   return (
-//                     <Draggable key={id} draggableId={id} index={index}>
-//                       {(provided) => (
-//                         <li
-//                           ref={provided.innerRef}
-//                           {...provided.draggableProps}
-//                           {...provided.dragHandleProps}
-//                         >
-//                           <div className="characters-thumb">
-//                             <img src={thumb} alt={`${name} Thumb`} />
-//                           </div>
-//                           <p>{name}</p>
-//                           <span className="p-10 bg-red-600">{test}</span>
-//                         </li>
-//                       )}
-//                     </Draggable>
-//                   );
-//                 })}
-//                 {provided.placeholder}
-//               </ul>
-//             )}
-//           </Droppable>
-//         </DragDropContext>
-//       </header>
-//       <p>
-//         Images from{" "}
-//         <a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
-//           Final Space Wiki
-//         </a>
-//       </p>
-//     </div>
-//   );
-// }
-
-// export default Testt;