refactor: separation of shared components

src/components/dnd/SortableDnd/SortableOverlay.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from "react";
+import {
+    defaultDropAnimationSideEffects,
+    DragOverlay,
+    DropAnimation,
+} from "@dnd-kit/core";
+
+const dropAnimationConfig: DropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: "0.4",
+            },
+        },
+    }),
+};
+
+export function SortableOverlay({ children }: PropsWithChildren) {
+    return (
+        <DragOverlay dropAnimation={dropAnimationConfig}>
+            {children}
+        </DragOverlay>
+    );
+}