feat: raw boards dnd

src/app/deals/components/Board/Board.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import { Box } from "@mantine/core";
+import { BoardSchema } from "@/types/BoardSchema";
+
+type Props = {
+    board: BoardSchema;
+};
+
+const Board: FC<Props> = ({ board }) => {
+    return <Box miw={100} style={{ borderWidth: 1, margin: 0 }}>{board.name}</Box>;
+};
+
+export default Board;

src/app/deals/components/Boards/Boards.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { ScrollArea } from "@mantine/core";
+import Board from "@/app/deals/components/Board/Board";
+import useBoards from "@/app/deals/hooks/useBoards";
+import SortableDnd from "@/components/SortableDnd";
+import { BoardSchema } from "@/types/BoardSchema";
+
+const Boards = () => {
+    const { boards, setBoards } = useBoards();
+
+    const renderBoard = (board: BoardSchema) => {
+        return <Board board={board} />;
+    };
+
+    const onDragEnd = (itemId: number, newLexorank: string) => {};
+
+    return (
+        <ScrollArea
+            offsetScrollbars={"y"}
+            w={"100%"}>
+            <SortableDnd
+                initialItems={boards}
+                renderItem={renderBoard}
+                onDragEnd={onDragEnd}
+                rowStyle={{ flexWrap: "nowrap" }}
+            />
+        </ScrollArea>
+    );
+};
+
+export default Boards;

src/app/deals/hooks/useBoards.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { BoardSchema } from "@/types/BoardSchema";
+
+const useBoards = () => {
+    const [boards, setBoards] = useState<BoardSchema[]>([]);
+
+    useEffect(() => {
+        setBoards([
+            { id: 1, name: "1 Item", rank: "0|aaaaaa:" },
+            { id: 2, name: "2 Item", rank: "0|gggggg:" },
+            { id: 3, name: "3 Item", rank: "0|mmmmmm:" },
+            { id: 4, name: "4 Item", rank: "0|ssssss:" },
+            { id: 5, name: "5 Item", rank: "0|zzzzzz:" },
+        ]);
+    }, []);
+
+    return {
+        boards,
+        setBoards,
+    };
+};
+
+export default useBoards;

src/app/deals/page.tsx

@@ -0,0 +1,13 @@
+import Boards from "@/app/deals/components/Boards/Boards";
+import PageBlock from "@/components/PageBlock/PageBlock";
+import PageContainer from "@/components/PageContainer/PageContainer";
+
+export default function DealsPage() {
+    return (
+        <PageContainer>
+            <PageBlock>
+                <Boards />
+            </PageBlock>
+        </PageContainer>
+    );
+}