Use DnDKit for ranking tasks

website/src/components/Sortable/SortableItem.tsx

@@ -1,40 +1,25 @@
-import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
-import { Button } from "@chakra-ui/react";
-import clsx from "clsx";
+import { CSS } from "@dnd-kit/utilities";
+import { PropsWithChildren } from "react";
+import { useSortable } from "@dnd-kit/sortable";
 
-export interface SortableItemProps {
-  canIncrement: boolean;
-  canDecrement: boolean;
-  onIncrement: () => void;
-  onDecrement: () => void;
-  children: React.ReactNode;
-}
+export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    touchAction: "none",
+  };
 
-export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
   return (
-    <li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
-      <ArrowButton active={canIncrement} onClick={onIncrement}>
-        <ArrowUpIcon width={28} />
-      </ArrowButton>
-      <span style={{ gridRow: "span 2" }}>{children}</span>
-
-      <ArrowButton active={canDecrement} onClick={onDecrement}>
-        <ArrowDownIcon width={28} />
-      </ArrowButton>
+    <li
+      className="rounded-lg shadow-md p-4 bg-white hover:bg-slate-50"
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
     </li>
   );
 };
-
-interface ArrowButtonProps {
-  active: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-}
-
-const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
-  return (
-    <Button justifyContent="center" variant="ghost" onClick={onClick} disabled={!active}>
-      {children}
-    </Button>
-  );
-};