feat: wip UI attachments

packages/webapp/src/containers/Import/ImportDropzoneFile.tsx

@@ -1,17 +1,22 @@
 // @ts-nocheck
 import { useRef } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
+import clsx from 'classnames';
 import { Box, Icon, Stack } from '@/components';
 import { Dropzone, DropzoneProps } from '@/components/Dropzone';
 import { MIME_TYPES } from '@/components/Dropzone/mine-types';
-import styles from './ImportDropzone.module.css';
 import { useUncontrolled } from '@/hooks/useUncontrolled';
+import styles from './ImportDropzone.module.css';
 
 interface ImportDropzoneFieldProps {
   initialValue?: File;
   value?: File;
   onChange?: (file: File) => void;
   dropzoneProps?: DropzoneProps;
+  uploadIcon?: JSX.Element;
+  title?: string;
+  subtitle?: string;
+  classNames?: Record<string, string>;
 }
 
 export function ImportDropzoneField({
@@ -19,6 +24,10 @@ export function ImportDropzoneField({
   value,
   onChange,
   dropzoneProps,
+  uploadIcon = <Icon icon="download" iconSize={26} />,
+  title = 'Drag images here or click to select files',
+  subtitle = 'Drag and Drop file here or Choose file',
+  classNames,
 }: ImportDropzoneFieldProps) {
   const [localValue, handleChange] = useUncontrolled({
     value,
@@ -38,15 +47,18 @@ export function ImportDropzoneField({
       onReject={(files) => console.log('rejected files', files)}
       maxSize={5 * 1024 ** 2}
       accept={[MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx]}
-      classNames={{ content: styles.dropzoneContent }}
+      classNames={{ root: classNames?.root, content: styles.dropzoneContent }}
       activateOnClick={false}
       openRef={openRef}
       {...dropzoneProps}
     >
-      <Stack spacing={12} align="center" className={styles.content}>
-        <Box className={styles.iconWrap}>
-          <Icon icon="download" iconSize={26} />
-        </Box>
+      <Stack
+        spacing={12}
+        align="center"
+        className={clsx(styles.content, classNames?.content)}
+      >
+        {uploadIcon && <Box className={styles.iconWrap}>{uploadIcon}</Box>}
+
         {localValue ? (
           <Stack spacing={6} justify="center" align="center">
             <h4 className={styles.title}>{localValue.name}</h4>
@@ -56,15 +68,10 @@ export function ImportDropzoneField({
           </Stack>
         ) : (
           <Stack spacing={4} align="center">
-            <h4 className={styles.title}>
-              Drag images here or click to select files
-            </h4>
-            <span className={styles.subtitle}>
-              Drag and Drop file here or Choose file
-            </span>
+            {title && <h4 className={styles.title}>{title}</h4>}
+            {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
           </Stack>
         )}
-
         <Button
           intent="none"
           onClick={() => openRef.current?.()}