added dnd-kit for images

src/components/editors/SortableImageGridItem/index.tsx

@@ -1,11 +1,44 @@
-import React from 'react';
+import React, { FC } from 'react';
 
-import { SortableElement } from 'react-sortable-hoc';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-const SortableImageGridItem = SortableElement(({ children }) => (
-  <div className={styles.item}>{children}</div>
-));
+interface SortableImageGridItemProps {
+  id: number;
+  disabled?: boolean;
+  className?: string;
+}
+
+const SortableImageGridItem: FC<SortableImageGridItemProps> = ({
+  children,
+  id,
+  disabled = false,
+  className,
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id,
+    disabled,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={classNames(styles.item, className)}
+    >
+      {children}
+    </div>
+  );
+};
 
 export { SortableImageGridItem };