advanced frontend also being managed by 2.0

nextjs/src/components/DropTargetStyling.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { useDraggingContext } from "../app/course/[courseName]/context/draggingContext";
+
+export default function DropTargetStyling({
+  children,
+  draggingClassName,
+}: {
+  children: ReactNode;
+  draggingClassName: string;
+}) {
+  const { isDragging } = useDraggingContext();
+  return (
+    <div
+      className={
+        "h-full transition-all duration-500  " +
+        (isDragging ? draggingClassName : "")
+      }
+    >
+      {children}
+    </div>
+  );
+}