53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Group, ScrollArea } from "@mantine/core";
|
|
import Board from "@/app/deals/components/shared/Board/Board";
|
|
import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import SortableDnd from "@/components/dnd/SortableDnd";
|
|
import useIsMobile from "@/hooks/useIsMobile";
|
|
import { BoardSchema } from "@/lib/client";
|
|
|
|
const Boards = () => {
|
|
const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
|
|
const isMobile = useIsMobile();
|
|
|
|
const renderBoard = (board: BoardSchema) => <Board 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={"100%"}
|
|
mt={"xs"}
|
|
mb={"sm"}>
|
|
<Group
|
|
wrap={"nowrap"}
|
|
gap={0}>
|
|
<SortableDnd
|
|
initialItems={boards}
|
|
renderItem={renderBoard}
|
|
onDragEnd={onDragEnd}
|
|
onItemClick={selectBoard}
|
|
containerStyle={{ flexWrap: "nowrap" }}
|
|
dragHandleStyle={{ cursor: "pointer" }}
|
|
disabled={isMobile}
|
|
/>
|
|
<CreateBoardButton />
|
|
</Group>
|
|
</ScrollArea>
|
|
);
|
|
};
|
|
|
|
export default Boards;
|