feat: division between mobile and desktop components, boards for mobile

src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { Group, ScrollArea } from "@mantine/core";
+import BoardMobile from "@/app/deals/components/mobile/BoardMobile/BoardMobile";
+import CreateBoardButtonMobile from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
+import useIsMobile from "@/hooks/useIsMobile";
+import { BoardSchema } from "@/lib/client";
+
+const BoardsMobile = () => {
+    const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
+    const isMobile = useIsMobile();
+
+    const renderBoard = (board: BoardSchema) => <BoardMobile board={board} />;
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        onUpdateBoard(itemId, { lexorank: newLexorank });
+    };
+
+    const selectBoard = (board: BoardSchema) => {
+        setSelectedBoard(board);
+    };
+
+    return (
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbars={"x"}
+            scrollbarSize={0}
+            w={"100vw"}>
+            <Group
+                wrap={"nowrap"}
+                gap={0}>
+                <SortableDnd
+                    initialItems={boards}
+                    renderItem={renderBoard}
+                    onDragEnd={onDragEnd}
+                    onItemClick={selectBoard}
+                    containerStyle={{ flexWrap: "nowrap" }}
+                    dragHandleStyle={{ cursor: "pointer" }}
+                    disabled={isMobile}
+                />
+                <CreateBoardButtonMobile />
+            </Group>
+        </ScrollArea>
+    );
+};
+
+export default BoardsMobile;