feat: actions for services and categories

src/components/ui/BaseTable/components/UpdateDeleteTableActions.tsx

@@ -0,0 +1,84 @@
+import React, { CSSProperties, FC } from "react";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import { Box, Flex, Group, Menu, Text } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
+import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+
+type Props = {
+    onChange: () => void;
+    onDelete: () => void;
+    dotsForMobile?: boolean;
+    style?: CSSProperties;
+};
+
+const UpdateDeleteTableActions: FC<Props> = ({
+    onChange,
+    onDelete,
+    style,
+    dotsForMobile = false,
+}) => {
+    const isMobile = useIsMobile();
+
+    if (dotsForMobile && isMobile) {
+        return (
+            <Menu>
+                <Menu.Target>
+                    <Box onClick={e => e.stopPropagation()}>
+                        <ThemeIcon size={"sm"}>
+                            <IconDotsVertical />
+                        </ThemeIcon>
+                    </Box>
+                </Menu.Target>
+                <Menu.Dropdown>
+                    <Menu.Item
+                        onClick={e => {
+                            e.stopPropagation();
+                            onChange();
+                        }}>
+                        <Group wrap={"nowrap"}>
+                            <IconEdit />
+                            <Text>Редактировать</Text>
+                        </Group>
+                    </Menu.Item>
+                    <Menu.Item
+                        onClick={e => {
+                            e.stopPropagation();
+                            onDelete();
+                        }}>
+                        <Group wrap={"nowrap"}>
+                            <IconTrash />
+                            <Text>Удалить</Text>
+                        </Group>
+                    </Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        );
+    }
+
+    return (
+        <Flex
+            gap={isMobile ? "xs" : "md"}
+            style={style}>
+            <ActionIconWithTip
+                onClick={e => {
+                    e.stopPropagation();
+                    onChange();
+                }}
+                tipLabel={"Редактировать"}>
+                <IconEdit />
+            </ActionIconWithTip>
+            <ActionIconWithTip
+                color={"red"}
+                onClick={e => {
+                    e.stopPropagation();
+                    onDelete();
+                }}
+                tipLabel={"Удалить"}>
+                <IconTrash />
+            </ActionIconWithTip>
+        </Flex>
+    );
+};
+
+export default UpdateDeleteTableActions;