From e6ed0cb4959c0b41091bbc981f9a7da42ed06071 Mon Sep 17 00:00:00 2001
From: saiful7778 <saiful.islam.rafi.88@gmail.com>
Date: Thu, 26 Sep 2024 09:24:20 +0600
Subject: [PATCH 1/3] Feat(Upload): Add Drag active and Drag reject effect.

---
 app/src/components/Upload/Body.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx
index e9aee759..3335ca22 100644
--- a/app/src/components/Upload/Body.tsx
+++ b/app/src/components/Upload/Body.tsx
@@ -7,16 +7,17 @@ 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',
           className,
         )}>
         <input {...getInputProps()} />

From e6847285d3893ee5f3dcfb92dae72c6ce7aa9c59 Mon Sep 17 00:00:00 2001
From: saiful7778 <saiful.islam.rafi.88@gmail.com>
Date: Thu, 26 Sep 2024 09:33:14 +0600
Subject: [PATCH 2/3] Style(Upload-icon): add tailwindcss size class.

---
 app/src/components/Upload/Icon.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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>

From 3d42b65bd8b0e7644ff706b9f5663a82f9a665e7 Mon Sep 17 00:00:00 2001
From: saiful7778 <saiful.islam.rafi.88@gmail.com>
Date: Thu, 26 Sep 2024 09:34:46 +0600
Subject: [PATCH 3/3] Feat(Upload): add disable style.

---
 app/src/components/Upload/Body.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx
index 3335ca22..2fea22d8 100644
--- a/app/src/components/Upload/Body.tsx
+++ b/app/src/components/Upload/Body.tsx
@@ -18,6 +18,7 @@ const UploadBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
           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()} />