feat: raw slider for deals on mobile

src/components/dnd/SortableItem/DragHandle.tsx

@@ -1,24 +1,32 @@
-import React, { CSSProperties, ReactNode, useContext } from "react";
-import SortableItemContext from "@/components/dnd/SortableItem/SortableItemContext";
+import React, { CSSProperties, ReactNode } from "react";
+import { useDraggable } from "@dnd-kit/core";
 
 type Props = {
+    id: number | string;
     children: ReactNode;
     style?: CSSProperties;
+    disabled?: boolean;
 };
 
-const DragHandle = ({ children, style }: Props) => {
-    const { attributes, listeners, ref } = useContext(SortableItemContext);
+const DragHandle = ({ id, children, style, disabled }: Props) => {
+    const { attributes, listeners, setNodeRef } = useDraggable({
+        id,
+        disabled,
+    });
 
     return (
         <div
             {...attributes}
             {...listeners}
+            onTouchStart={e => !disabled && e.stopPropagation()}
+            onTouchMove={e => !disabled && e.stopPropagation()}
             style={{
-                width: "100%",
-                cursor: "grab",
+                width: "100wv",
+                cursor: disabled ? "default" : "grab",
+                touchAction: "none",
                 ...style,
             }}
-            ref={ref}>
+            ref={setNodeRef}>
             {children}
         </div>
     );