52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
"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"}
|
|
mt={5}>
|
|
<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;
|