From b02b4ee4eb02765661eecb8f31821674212b913c Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Thu, 30 May 2024 17:00:39 -0300
Subject: [PATCH] Refactor: Create wrap for download button

---
 .../downloadButton/downloadButton.tsx         | 25 ++++++++++++++
 .../chatView/fileComponent/index.tsx          | 33 ++++---------------
 2 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx

diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
new file mode 100644
index 000000000..8df64561b
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
@@ -0,0 +1,25 @@
+import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
+
+export default function DownloadButton({
+  isHovered,
+  handleDownload,
+}: {
+  isHovered: boolean;
+  handleDownload: () => void;
+}): JSX.Element | undefined {
+  if (isHovered) {
+    return (
+      <div
+        className={`absolute right-1 top-1 rounded-bl-lg bg-muted text-sm font-bold text-foreground `}
+      >
+        <button className="px-2 py-1 text-ring " onClick={handleDownload}>
+          <ForwardedIconComponent
+            name="DownloadCloud"
+            className="h-5 w-5 text-current hover:scale-110"
+          />
+        </button>
+      </div>
+    );
+  }
+  return undefined;
+}
diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
index f15c6b63e..a99006242 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
@@ -7,6 +7,7 @@ import { fileCardPropsType } from "../../../../../types/components";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 import { BACKEND_URL, BASE_URL_API } from "../../../../../constants/constants";
 import formatFileName from "../filePreviewChat/utils/format-file-name";
+import DownloadButton from "./components/downloadButton/downloadButton";
 
 const imgTypes = new Set(["png", "jpg"]);
 
@@ -62,21 +63,10 @@ export default function FileCard({
               alt="generated image"
               className="m-0  h-auto w-auto rounded-lg border border-border p-0 transition-all"
             />
-            {isHovered && (
-              <div
-                className={`absolute right-1 top-1 rounded-bl-lg bg-muted text-sm font-bold text-foreground `}
-              >
-                <button
-                  className="px-2 py-1 text-ring "
-                  onClick={handleDownload}
-                >
-                  <IconComponent
-                    name="DownloadCloud"
-                    className="h-5 w-5 text-current hover:scale-110"
-                  />
-                </button>
-              </div>
-            )}
+            <DownloadButton
+              isHovered={isHovered}
+              handleDownload={handleDownload}
+            />
           </div>
         </div>
       );
@@ -98,18 +88,7 @@ export default function FileCard({
             <span>File</span>
           </div>
         </div>
-        {isHovered && (
-          <div
-            className={`absolute right-0 top-1 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
-          >
-            <button className="px-2 py-1 text-ring " onClick={handleDownload}>
-              <IconComponent
-                name="DownloadCloud"
-                className="h-5 w-5 text-current hover:scale-110"
-              />
-            </button>
-          </div>
-        )}
+        <DownloadButton isHovered={isHovered} handleDownload={handleDownload} />
       </div>
     );
   }