diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx index e9aee759..2fea22d8 100644 --- a/app/src/components/Upload/Body.tsx +++ b/app/src/components/Upload/Body.tsx @@ -7,16 +7,18 @@ import { useUploadContext } from './UploadContext' const UploadBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( ({ children, className, ...props }, ref: Ref<HTMLDivElement>) => { const { options, horizontal } = useUploadContext() - const { getRootProps, getInputProps } = useDropzone(options) + const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(options) return ( <div {...props} ref={ref} {...getRootProps()} className={cn( - horizontal - ? 'flex cursor-pointer items-center gap-4 rounded-xl border border-dashed bg-white px-3 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900' - : 'flex cursor-pointer flex-col items-center rounded-xl border border-dashed border-metal-50 bg-white p-3 text-center transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900', + 'flex cursor-pointer items-center rounded-xl border border-dashed bg-white transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900', + horizontal ? 'gap-4 px-3' : 'flex-col border-metal-50 p-3 text-center', + isDragActive && 'border-blue-500 bg-sky-100 dark:bg-blue-900', + isDragReject && 'border-red-500 bg-red-100 dark:bg-red-900', + options?.disabled && 'cursor-not-allowed hover:bg-transparent', className, )}> <input {...getInputProps()} /> diff --git a/app/src/components/Upload/Icon.tsx b/app/src/components/Upload/Icon.tsx index 22ba2581..fef2145b 100644 --- a/app/src/components/Upload/Icon.tsx +++ b/app/src/components/Upload/Icon.tsx @@ -7,10 +7,7 @@ const UploadIcon = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( return ( <div {...props} - className={cn( - 'flex h-16 w-16 items-center justify-center rounded-full bg-metal-50 dark:bg-metal-800', - className, - )} + className={cn('flex size-16 items-center justify-center rounded-full bg-metal-50 dark:bg-metal-800', className)} ref={ref}> {children} </div>