From 51c6a43627746c5381ab80513e0ab1ce7e329b13 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sat, 9 Jul 2022 11:12:02 +0430
Subject: [PATCH] update App.js, src/components/Accordion/index.js,
 src/components/Questions/index.js and src/components/Settingss/index.js

---
 src/App.js                        |   2 +
 src/components/Accordion/index.js | 203 ++++++++++++------------
 src/components/Questions/index.js |   2 +
 src/components/Settingss/index.js |   2 +-
 src/components/Testt/App.css      |  60 +++++++
 src/components/Testt/index.js     | 249 ++++++++++++++++++++++++++++++
 src/components/Testt/mahdi.js     | 203 ++++++++++++++++++++++++
 7 files changed, 615 insertions(+), 106 deletions(-)
 create mode 100644 src/components/Testt/App.css
 create mode 100644 src/components/Testt/index.js
 create mode 100644 src/components/Testt/mahdi.js

diff --git a/src/App.js b/src/App.js
index 76d3ff5..bbe98c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,12 @@
 import "./App.scss";
 import Card from "./components/Card";
+import Testt from "./components/Testt";
 
 function App() {
   return (
     <>
       <Card />
+      <Testt />
     </>
   );
 }
diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js
index 02cc40d..6e70f5c 100644
--- a/src/components/Accordion/index.js
+++ b/src/components/Accordion/index.js
@@ -1,110 +1,7 @@
 import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 
-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 Accordion({ vod }) {
+function Accordion({ finalSpaceCharacters }) {
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
@@ -172,5 +69,101 @@ function Accordion({ vod }) {
 
 export default Accordion;
 Accordion.defaultProps = {
-  vod: true,
+  finalSpaceCharacters: [
+    {
+      id: "1",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "2",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "3",
+      name: "KVN",
+      thumb: "/images/kvn.png",
+      title:
+        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+      video: 4,
+      min: 30,
+
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "4",
+      name: "Mooncake",
+      thumb: "/images/kvn.png",
+      title:
+        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "5",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+  ],
 };
diff --git a/src/components/Questions/index.js b/src/components/Questions/index.js
index 2206e02..2c9b176 100644
--- a/src/components/Questions/index.js
+++ b/src/components/Questions/index.js
@@ -3,6 +3,8 @@ import Accordion from "../Accordion";
 import CustomSelectBox from "../CustomSelectBox";
 
 const Questions = () => {
+  // const [selectedQuestion, setSelectedQuestion] = useState(null);
+
   return (
     <div className=" w-full">
       <CustomSelectBox
diff --git a/src/components/Settingss/index.js b/src/components/Settingss/index.js
index 54a9075..99ed392 100644
--- a/src/components/Settingss/index.js
+++ b/src/components/Settingss/index.js
@@ -7,7 +7,7 @@ import CircleInCircle from "../CircleInCircle";
 import RadioButton from "../RadioButton";
 
 const Settingss = ({ status }) => {
-  const { register, getValues } = useForm();
+  const { register } = useForm();
 
   return (
     <div className="w-full flex flex-row items-start justify-between mx-auto  divide-x-2 divide-[#E3E3E3] divide-x-reverse">
diff --git a/src/components/Testt/App.css b/src/components/Testt/App.css
new file mode 100644
index 0000000..49adc02
--- /dev/null
+++ b/src/components/Testt/App.css
@@ -0,0 +1,60 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 1.5vmin);
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.characters {
+  list-style: none;
+  padding-left: 0;
+}
+
+.characters li {
+  display: flex;
+  align-items: center;
+  border: solid 2px #d0d0d0;
+  border-radius: 0.2em;
+  padding: 0.5em 0.8em 0.5em 0.5em;
+  margin-bottom: 1em;
+}
+
+.characters p {
+  max-width: none;
+  font-weight: bold;
+  margin: 0;
+}
+
+.characters-thumb {
+  overflow: hidden;
+  flex-shrink: 0;
+  width: 2em;
+  height: 2em;
+  background-color: #e8e8e8;
+  padding: 0.5em;
+  margin-right: 0.5em;
+}
+
+.characters-thumb img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
diff --git a/src/components/Testt/index.js b/src/components/Testt/index.js
new file mode 100644
index 0000000..87e4282
--- /dev/null
+++ b/src/components/Testt/index.js
@@ -0,0 +1,249 @@
+import React, { useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import "./App.css";
+import CircleInCircle from "../CircleInCircle";
+import Button from "../Button";
+
+function Testt({ vod, finalSpaceCharacters }) {
+  const [activeAccordion, setActiveAccordion] = useState(null);
+  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 (
+    <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((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"
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </section>
+  );
+}
+
+export default Testt;
+
+Testt.defaultProps = {
+  finalSpaceCharacters: [
+    {
+      id: "1",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "2",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "3",
+      name: "KVN",
+      thumb: "/images/kvn.png",
+      title:
+        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+      video: 4,
+      min: 30,
+
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "4",
+      name: "Mooncake",
+      thumb: "/images/kvn.png",
+      title:
+        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "5",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/components/Testt/mahdi.js b/src/components/Testt/mahdi.js
new file mode 100644
index 0000000..46e91e3
--- /dev/null
+++ b/src/components/Testt/mahdi.js
@@ -0,0 +1,203 @@
+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",
+    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 Testt({ vod }) {
+  const [activeAccordion, setActiveAccordion] = useState(null);
+  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 (
+    <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-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">{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>
+                      )}
+                    </Draggable>
+                  );
+                }
+              )}
+              {provided.placeholder}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </section>
+  );
+}
+
+export default Testt;