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

src/app/deals/components/shared/StatusMenu/StatusMenu.tsx

@@ -0,0 +1,72 @@
+import React, { FC } from "react";
+import {
+    IconDotsVertical,
+    IconEdit,
+    IconExchange,
+    IconTrash,
+} from "@tabler/icons-react";
+import { Box, Group, Menu, Text } from "@mantine/core";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import useIsMobile from "@/hooks/useIsMobile";
+import { StatusSchema } from "@/lib/client";
+
+type Props = {
+    status: StatusSchema;
+    handleEdit: () => void;
+};
+
+const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
+    const isMobile = useIsMobile();
+    const { onDeleteStatus, setIsEditorDrawerOpened } = useStatusesContext();
+
+    return (
+        <Menu>
+            <Menu.Target>
+                <Box
+                    p={5}
+                    style={{
+                        cursor: "pointer",
+                    }}
+                    onClick={e => e.stopPropagation()}>
+                    <IconDotsVertical size={16} />
+                </Box>
+            </Menu.Target>
+            <Menu.Dropdown>
+                <Menu.Item
+                    onClick={e => {
+                        e.stopPropagation();
+                        handleEdit();
+                    }}>
+                    <Group wrap={"nowrap"}>
+                        <IconEdit />
+                        <Text>Переименовать</Text>
+                    </Group>
+                </Menu.Item>
+                <Menu.Item
+                    onClick={e => {
+                        e.stopPropagation();
+                        onDeleteStatus(status);
+                    }}>
+                    <Group wrap={"nowrap"}>
+                        <IconTrash />
+                        <Text>Удалить</Text>
+                    </Group>
+                </Menu.Item>
+                {isMobile && (
+                    <Menu.Item
+                        onClick={e => {
+                            e.stopPropagation();
+                            setIsEditorDrawerOpened(true);
+                        }}>
+                        <Group wrap={"nowrap"}>
+                            <IconExchange />
+                            <Text>Изменить порядок</Text>
+                        </Group>
+                    </Menu.Item>
+                )}
+            </Menu.Dropdown>
+        </Menu>
+    );
+};
+
+export default StatusMenu;