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

src/components/Accordion/AccordionDesign1/index.js

@@ -1,14 +1,49 @@
 import React, { useState } from "react";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import Button from "../../ButtonDesign/Button";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 
 const AccordionDesign1 = ({ items, vod }) => {
   const [activeAccordion, setActiveAccordion] = useState(null);
+  const [accordions, updateAccordion] = useState(items);
+
+  function handleOnDragEnd(result) {
+    if (!result.destination) return;
+
+    const items = Array.from(accordions);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    updateAccordion(items);
+  }
 
   return (
-    <section className="w-full flex flex-col bg-gray-200">
+    <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) => (
-        <div className="flex flex-col" key={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 */}
                     <div
                       className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
@@ -17,7 +52,9 @@ const AccordionDesign1 = ({ items, vod }) => {
                           : "border-secondary"
                       } cursor-pointer`}
                       onClick={() =>
-              setActiveAccordion(activeAccordion === item ? null : item)
+                        setActiveAccordion(
+                          activeAccordion === item ? null : item
+                        )
                       }
                     >
                       <CircleInCircle
@@ -51,7 +88,7 @@ const AccordionDesign1 = ({ items, vod }) => {
                     {/* 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">
+                        <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
@@ -60,7 +97,11 @@ const AccordionDesign1 = ({ items, vod }) => {
                                 alt="line"
                               />
                             )}
-                  <span className={`text-sm ${vod === true ? "mr-0" : "mr-3"}`}>
+                            <span
+                              className={`text-sm ${
+                                vod === true ? "mr-0" : "mr-3"
+                              }`}
+                            >
                               {i + 1}
                             </span>
                           </div>
@@ -97,9 +138,15 @@ const AccordionDesign1 = ({ items, vod }) => {
                           </div>
                         </div>
                       ))}
+                    {provided.placeholder}
                   </div>
+                )}
+              </Draggable>
             ))}
           </section>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };