move download button to main App

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} />
         </>
       )}

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>
   );
 }