From 9424f6303a8611e6b4c65eafc3ef80d3b908a4fd Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 12 Feb 2025 20:10:21 +0530
Subject: [PATCH] (feat:upload) smooth transitions on advanced fields

---
 frontend/src/upload/Upload.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 0e030beb..248d9f11 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -54,16 +54,28 @@ function Upload({
     const advancedFields = schema.filter((field) => field.advanced);
 
     return (
-      <>
-        {generalFields.map((field: FormField) => renderField(field))}
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4">
+          {generalFields.map((field: FormField) => renderField(field))}
+        </div>
 
-        {advancedFields.length > 0 && showAdvancedOptions && (
-          <>
-            <hr className="my-4 border-[#C4C4C4]/40 border-[1px]" />
-            {advancedFields.map((field: FormField) => renderField(field))}
-          </>
+        {advancedFields.length > 0 && (
+          <div
+            className={`grid transition-all duration-300 ease-in-out ${
+              showAdvancedOptions
+                ? 'grid-rows-[1fr] opacity-100'
+                : 'grid-rows-[0fr] opacity-0'
+            }`}
+          >
+            <div className="overflow-hidden flex flex-col gap-4">
+              <hr className="my-4 border-[#C4C4C4]/40 border-[1px]" />
+              <div className="flex flex-col gap-4">
+                {advancedFields.map((field: FormField) => renderField(field))}
+              </div>
+            </div>
+          </div>
         )}
-      </>
+      </div>
     );
   };