feat: pointer cursor for boards and deals

src/app/deals/components/DealContainer/DealContainer.tsx

@@ -4,7 +4,6 @@ import DealCard from "@/app/deals/components/DealCard/DealCard";
 import { DealSchema } from "@/client";
 import { SortableItem } from "@/components/SortableDnd/SortableItem";
 
-
 type Props = {
     deal: DealSchema;
 };
@@ -14,7 +13,11 @@ const DealContainer: FC<Props> = ({ deal }) => {
 
     return (
         <Box>
-            <SortableItem id={deal.id}>{dealBody}</SortableItem>
+            <SortableItem
+                dragHandleStyle={{ cursor: "pointer" }}
+                id={deal.id}>
+                {dealBody}
+            </SortableItem>
         </Box>
     );
 };

src/components/SortableDnd/DragHandle.tsx

@@ -1,11 +1,12 @@
-import React, { ReactNode, useContext } from "react";
+import React, { CSSProperties, ReactNode, useContext } from "react";
 import SortableItemContext from "@/components/SortableDnd/SortableItemContext";
 
 type Props = {
     children: ReactNode;
+    style?: CSSProperties;
 };
 
-const DragHandle = ({ children }: Props) => {
+const DragHandle = ({ children, style }: Props) => {
     const { attributes, listeners, ref } = useContext(SortableItemContext);
 
     return (
@@ -15,6 +16,7 @@ const DragHandle = ({ children }: Props) => {
             style={{
                 width: "100%",
                 cursor: "grab",
+                ...style,
             }}
             ref={ref}>
             {children}

src/components/SortableDnd/SortableDnd.tsx

@@ -109,6 +109,7 @@ const SortableDnd = <T extends BaseItem>({
                                 onItemClick(item);
                             }}>
                             <SortableItem
+                                dragHandleStyle={{ cursor: "pointer" }}
                                 itemStyle={itemStyle}
                                 id={item.id}>
                                 {renderItem(item)}

src/components/SortableDnd/SortableItem.tsx

@@ -7,12 +7,14 @@ import SortableItemContext from "./SortableItemContext";
 type Props = {
     id: number | string;
     itemStyle?: CSSProperties;
+    dragHandleStyle?: CSSProperties;
 };
 
 export const SortableItem = ({
     children,
     itemStyle,
     id,
+    dragHandleStyle,
 }: PropsWithChildren<Props>) => {
     const {
         attributes,
@@ -45,7 +47,7 @@ export const SortableItem = ({
             <div
                 ref={setNodeRef}
                 style={style}>
-                <DragHandle>{children}</DragHandle>
+                <DragHandle style={dragHandleStyle}>{children}</DragHandle>
             </div>
         </SortableItemContext.Provider>
     );