From 126972bee0abe260490748b790c8706e21903545 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 17:18:04 -0500
Subject: [PATCH] move download button to main App

---
 frontend/src/App.tsx                | 12 ++++++++++++
 frontend/src/components/Preview.tsx | 13 -------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fcefcb8..b9fc242 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,6 +10,13 @@ function App() {
   );
   const [generatedCode, setGeneratedCode] = useState<string>("");
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
+  const [blobUrl, setBlobUrl] = useState("");
+
+  const createBlobUrl = () => {
+    const blob = new Blob([generatedCode], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    setBlobUrl(url);
+  };
 
   function startCodeGeneration(referenceImages: string[]) {
     setAppState("CODING");
@@ -40,6 +47,11 @@ function App() {
           <img className="w-[300px]" src={referenceImages[0]} alt="Reference" />
           {/* Show code preview only when coding */}
           {appState === "CODING" && <CodePreview code={generatedCode} />}
+          {appState === "CODE_READY" && (
+            <a onClick={createBlobUrl} href={blobUrl} download="index.html">
+              Download code
+            </a>
+          )}
           <Preview code={generatedCode} />
         </>
       )}
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index d5fa452..c8508b1 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,18 +1,8 @@
-import { useState } from "react";
-
 interface Props {
   code: string;
 }
 
 function Preview({ code }: Props) {
-  const [blobUrl, setBlobUrl] = useState("");
-
-  const createBlobUrl = () => {
-    const blob = new Blob([code], { type: "text/html" });
-    const url = URL.createObjectURL(blob);
-    setBlobUrl(url);
-  };
-
   return (
     <div className="w-[704px]">
       <iframe
@@ -21,9 +11,6 @@ function Preview({ code }: Props) {
         className="border-[5px] border-black rounded-[33px] p-4 shadow-lg 
         transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
       ></iframe>
-      <a onClick={createBlobUrl} href={blobUrl} download="index.html">
-        Download code
-      </a>
     </div>
   );
 }