Update src/components/deploy-button/deploy-button.tsx

src/components/deploy-button/deploy-button.tsx

@@ -1,25 +1,25 @@
-import { useState } from "react";
-import classNames from "classnames";
-
-const downloadFile = (filename: string, content: string) => {
-  const blob = new Blob([content], { type: "text/html" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-};
-
-function DeployButton({ html }: { html: string }) {
+function DeployButton({
+  html,
+  error,
+}: {
+  html: string;
+  error?: boolean;
+}) {
   const [loading, setLoading] = useState(false);
 
   const handleDownload = () => {
+    if (error) return; // optional check
     setLoading(true);
     setTimeout(() => {
-      downloadFile("index.html", html);
+      const blob = new Blob([html], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "index.html";
+      a.click();
+      URL.revokeObjectURL(url);
       setLoading(false);
-    }, 300); // slight delay for UX feedback
+    }, 300);
   };
 
   return (
@@ -28,16 +28,14 @@ function DeployButton({ html }: { html: string }) {
         className={classNames(
           "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-2 px-6 hover:bg-pink-400 text-white bg-pink-500 shadow-sm dark:shadow-highlight/20 transition-all duration-100",
           {
-            "opacity-50 cursor-not-allowed": loading,
+            "opacity-50 cursor-not-allowed": loading || error,
           }
         )}
         onClick={handleDownload}
-        disabled={loading}
+        disabled={loading || error}
       >
         {loading ? "Preparing..." : "Download HTML"}
       </button>
     </div>
   );
 }
-
-export default DeployButton;