refactor: moved dnd part from Funnel into FunnelDnd

src/components/dnd/SortableItem/DragHandle.tsx

@@ -0,0 +1,27 @@
+import React, { CSSProperties, ReactNode, useContext } from "react";
+import SortableItemContext from "@/components/dnd/SortableItem/SortableItemContext";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+};
+
+const DragHandle = ({ children, style }: Props) => {
+    const { attributes, listeners, ref } = useContext(SortableItemContext);
+
+    return (
+        <div
+            {...attributes}
+            {...listeners}
+            style={{
+                width: "100%",
+                cursor: "grab",
+                ...style,
+            }}
+            ref={ref}>
+            {children}
+        </div>
+    );
+};
+
+export default DragHandle;

src/components/dnd/SortableItem/SortableItem.tsx

@@ -0,0 +1,56 @@
+import React, { CSSProperties, PropsWithChildren, useMemo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import DragHandle from "./DragHandle";
+import SortableItemContext from "./SortableItemContext";
+
+type Props = {
+    id: number | string;
+    itemStyle?: CSSProperties;
+    dragHandleStyle?: CSSProperties;
+};
+
+const SortableItem = ({
+    children,
+    itemStyle,
+    id,
+    dragHandleStyle,
+}: PropsWithChildren<Props>) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef,
+        setActivatorNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id });
+
+    const context = useMemo(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef,
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    );
+
+    const style: CSSProperties = {
+        opacity: isDragging ? 0.4 : undefined,
+        transform: CSS.Translate.toString(transform),
+        transition,
+        ...itemStyle,
+    };
+
+    return (
+        <SortableItemContext.Provider value={context}>
+            <div
+                ref={setNodeRef}
+                style={style}>
+                <DragHandle style={dragHandleStyle}>{children}</DragHandle>
+            </div>
+        </SortableItemContext.Provider>
+    );
+};
+
+export default SortableItem;

src/components/dnd/SortableItem/SortableItemContext.tsx

@@ -0,0 +1,16 @@
+import type { DraggableSyntheticListeners } from "@dnd-kit/core";
+import { createContext } from "react";
+
+interface Context {
+    attributes: Record<string, any>;
+    listeners: DraggableSyntheticListeners;
+    ref: (node: HTMLElement | null) => void;
+}
+
+const SortableItemContext = createContext<Context>({
+    attributes: {},
+    listeners: undefined,
+    ref() {},
+});
+
+export default SortableItemContext;

src/components/dnd/SortableItem/index.ts

@@ -0,0 +1,3 @@
+import SortableItem from "./SortableItem";
+
+export default SortableItem;