feat: modules, products, services, services kits

src/components/ui/BaseTable/BaseTable.tsx

@@ -4,11 +4,10 @@ import { DataTable, DataTableProps } from "mantine-datatable";
 function BaseTable<T>(props: DataTableProps<T>) {
     return (
         <DataTable
-            withTableBorder={false}
+            withTableBorder
             withRowBorders
             striped={false}
             verticalAlign={"center"}
-            borderRadius={"lg"}
             backgroundColor={"transparent"}
             {...props}
         />

src/components/ui/ImageDropzone/ImageDropzone.tsx

@@ -0,0 +1,119 @@
+import { FC } from "react";
+import { IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import { omit } from "lodash";
+import {
+    Button,
+    Fieldset,
+    Flex,
+    Group,
+    Image,
+    Loader,
+    rem,
+    Text,
+} from "@mantine/core";
+import { Dropzone, DropzoneProps, FileWithPath } from "@mantine/dropzone";
+import UseImageDropzone from "./types";
+
+interface RestProps {
+    imageDropzone: UseImageDropzone;
+    onDrop: (files: FileWithPath[]) => void;
+}
+
+type Props = Omit<DropzoneProps, "onDrop"> & RestProps;
+
+const ImageDropzone: FC<Props> = (props: Props) => {
+    const { showDropzone, setShowDropzone, isLoading, imageUrlInputProps } =
+        props.imageDropzone;
+
+    const restProps = omit(props, ["imageDropzone"]);
+
+    const getDropzone = () => (
+        <Dropzone
+            {...restProps}
+            accept={[
+                "image/png",
+                "image/jpeg",
+                "image/gif",
+                "image/bmp",
+                "image/tiff",
+                "image/x-icon",
+                "image/webp",
+                "image/svg+xml",
+                "image/heic",
+            ]}
+            multiple={false}
+            onDrop={props.onDrop}>
+            <Group
+                justify="center"
+                gap="xl"
+                style={{ pointerEvents: "none" }}>
+                <Dropzone.Accept>
+                    <IconUpload
+                        style={{
+                            width: rem(52),
+                            height: rem(52),
+                            color: "var(--mantine-color-blue-6)",
+                        }}
+                        stroke={1.5}
+                    />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                    <IconX
+                        style={{
+                            width: rem(52),
+                            height: rem(52),
+                            color: "var(--mantine-color-red-6)",
+                        }}
+                        stroke={1.5}
+                    />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                    <IconPhoto
+                        style={{
+                            width: rem(52),
+                            height: rem(52),
+                            color: "var(--mantine-color-dimmed)",
+                        }}
+                        stroke={1.5}
+                    />
+                </Dropzone.Idle>
+
+                <div style={{ textAlign: "center" }}>
+                    <Text
+                        size="xl"
+                        inline>
+                        Перенесите изображение или нажмите чтоб выбрать файл
+                    </Text>
+                </div>
+            </Group>
+        </Dropzone>
+    );
+
+    const getBody = () => {
+        if (imageUrlInputProps?.value && !showDropzone) {
+            return <Image src={imageUrlInputProps.value} />;
+        }
+        return getDropzone();
+    };
+
+    return (
+        <Flex
+            gap={rem(10)}
+            direction={"column"}>
+            <Fieldset legend={"Изображение"}>
+                <Flex justify={"center"}>
+                    {isLoading ? <Loader /> : getBody()}
+                </Flex>
+            </Fieldset>
+            {!showDropzone && (
+                <Button
+                    onClick={() => setShowDropzone(true)}
+                    variant={"default"}>
+                    Заменить изображение {}
+                </Button>
+            )}
+        </Flex>
+    );
+};
+
+export default ImageDropzone;

src/components/ui/ImageDropzone/types.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from "react";
+import BaseFormInputProps from "@/utils/baseFormInputProps";
+
+type UseImageDropzone = {
+    showDropzone: boolean;
+    setShowDropzone: Dispatch<SetStateAction<boolean>>;
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    imageUrlInputProps?: BaseFormInputProps<string>;
+};
+
+export default UseImageDropzone;