feat: draggable events

client/src/features/editors/list/BlockBlock.jsx

@@ -1,3 +1,5 @@
+import { Draggable } from 'react-beautiful-dnd';
+import { FiMoreVertical } from 'react-icons/fi';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import ActionButtons from './ActionButtons';
 import style from './Block.module.css';
@@ -16,16 +18,27 @@ export default function BlockBlock(props) {
   };
 
   return (
-    <div className={style.block}>
-      <div className={style.actionOverlay}>
-        <DeleteIconBtn clickhandler={deleteHandler} />
-        <ActionButtons
-          showAdd
-          addHandler={addHandler}
-          showDelay
-          delayHandler={delayHandler}
-        />
-      </div>
-    </div>
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div
+          className={style.block}
+          {...provided.draggableProps}
+          ref={provided.innerRef}
+        >
+          <span className={style.drag} {...provided.dragHandleProps}>
+            <FiMoreVertical />
+          </span>
+          <div className={style.actionOverlay}>
+            <DeleteIconBtn clickhandler={deleteHandler} />
+            <ActionButtons
+              showAdd
+              addHandler={addHandler}
+              showDelay
+              delayHandler={delayHandler}
+            />
+          </div>
+        </div>
+      )}
+    </Draggable>
   );
 }