Dashboard Integration

website/src/components/Sortable/SortableItem.tsx

@@ -1,35 +1,44 @@
-import { Button } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useState } from "react";
 import { RxDragHandleDots2 } from "react-icons/rx";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
+  const backgroundColor = useColorModeValue("gray.700", "gray.500");
+  const textColor = useColorModeValue("white", "white");
+
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition,
     touchAction: "none",
   };
 
-  const { colorMode } = useColorMode();
-  const themedClasses =
-    colorMode === "light"
-      ? "bg-slate-600 hover:bg-slate-500 text-white"
-      : "bg-black hover:bg-slate-900 text-white ring-1 ring-white/30 ring-inset hover:ring-slate-200/50";
+  const [grabbing, setGrabbing] = useState(false);
 
   return (
-    <li
-      className={`grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 ${themedClasses}`}
+    <Box
+      display="flex"
+      alignItems="center"
+      bg={backgroundColor}
+      borderRadius="lg"
+      p="4"
+      color={textColor}
+      cursor={grabbing ? "grabbing" : "grab"}
+      onMouseDown={() => setGrabbing(true)}
+      onMouseUp={() => setGrabbing(false)}
+      {...attributes}
+      {...listeners}
       ref={setNodeRef}
       style={style}
+      shadow="base"
     >
-      <Button justifyContent="center" variant="ghost" {...attributes} {...listeners}>
-        <RxDragHandleDots2 />
-      </Button>
+      <Box pr="4">
+        <RxDragHandleDots2 size="20px" />
+      </Box>
       {children}
-    </li>
+    </Box>
   );
 };