✨ Dragndrop feature to move a file into a folder (#138) (#148)

Co-authored-by: Anton SHEPILOV <ashepilov@linagora.com>
Co-authored-by: montaghanmy <monta.ghanmy@gmail.com>

tdrive/frontend/src/app/features/dragndrop/hook/draggable.tsx

@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+import {useDraggable} from '@dnd-kit/core';
+
+type DraggableProps={
+  children: React.ReactNode
+  id: number
+}
+
+export function Draggable(props:DraggableProps) {
+  const {attributes, listeners, setNodeRef, transform} = useDraggable({
+    id: `draggable-${props.id+1}`,
+    data: {
+      child: props.children
+    },
+  });
+
+  return (
+    <div ref={setNodeRef} {...listeners} {...attributes}>
+      {props.children}
+    </div>
+  );
+}

tdrive/frontend/src/app/features/dragndrop/hook/droppable.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {useDroppable} from '@dnd-kit/core';
+
+type DroppableProps={
+  children: React.ReactNode
+  id: any
+}
+
+export function Droppable(props:DroppableProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id: `droppable-${props.id}`,
+    data: {
+      child: props.children
+    },
+  });
+  
+  return (
+    <div ref={setNodeRef} className={isOver ? "bg-sky-500/[.18] rounded-t-md rounded-b-md" : ""}>
+      {props.children}
+    </div>
+  );
+}
+