temp image upload

src/components/ImageDropzone/ImageDropzone.tsx

@@ -0,0 +1,54 @@
+import {Dropzone, DropzoneProps} from "@mantine/dropzone";
+import {FC} from "react";
+import {Group, rem, Text} from "@mantine/core";
+import {IconPhoto, IconUpload, IconX} from "@tabler/icons-react";
+import {omit} from "lodash";
+
+type RestProps = {
+    imageUrl?: string;
+};
+const ALL_PROPERTIES = Object.keys(colDefProperties) as (keyof ColDef)[];
+
+
+type Props = DropzoneProps & RestProps;
+
+const ImageDropzone: FC<Props> = (props: Props) => {
+    const restProps = omit()
+    return (
+        <Dropzone
+            {...props}
+        >
+            <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>
+                    <Text size="xl" inline>
+                        Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                        Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                </div>
+            </Group>
+        </Dropzone>
+    )
+}
+
+export default ImageDropzone;