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

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

@@ -3,8 +3,6 @@ import { useState } from "react";
 import classNames from "classnames";
 import { toast } from "react-toastify";
 
-
-
 import SpaceIcon from "@/assets/space.svg";
 import Loading from "../loading/loading";
 import Login from "../login/login";
@@ -15,15 +13,24 @@ const MsgToast = ({ url }: { url: string }) => (
     Your space is live!
     <button
       className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
-      onClick={() => {
-        window.open(url, "_blank");
-      }}
+      onClick={() => window.open(url, "_blank")}
     >
       See Space
     </button>
   </div>
 );
 
+// ✅ DOWNLOAD FUNCTION (no JSZip needed)
+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,
   error = false,
@@ -36,14 +43,10 @@ function DeployButton({
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [path, setPath] = useState<string | undefined>(undefined);
-
-  const [config, setConfig] = useState({
-    title: "",
-  });
+  const [config, setConfig] = useState({ title: "" });
 
   const createSpace = async () => {
     setLoading(true);
-
     try {
       const request = await fetch("/api/deploy", {
         method: "POST",
@@ -75,16 +78,6 @@ function DeployButton({
     }
   };
 
-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);
-};
-
   return (
     <div className="relative flex items-center justify-end">
       {auth && (
@@ -99,6 +92,8 @@ const downloadFile = (filename: string, content: string) => {
           </a>
         </p>
       )}
+
+      {/* Deploy to Space Button */}
       <button
         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-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
@@ -111,15 +106,8 @@ const downloadFile = (filename: string, content: string) => {
       >
         {path ? "Update Space" : "Deploy to Space"}
       </button>
-      <div className="pt-2 text-right">
-      
-  <button
-  className="mt-2 rounded-full bg-gray-800 px-5 py-2 text-white font-semibold text-xs hover:bg-gray-700 transition-all duration-100"
-  onClick={() => downloadFile("index.html", html)}
->
-  Download index.html
-</button>
 
+      {/* Pop-up Overlay */}
       <div
         className={classNames(
           "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
@@ -129,6 +117,8 @@ const downloadFile = (filename: string, content: string) => {
         )}
         onClick={() => setOpen(false)}
       ></div>
+
+      {/* Pop-up Content */}
       <div
         className={classNames(
           "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
@@ -155,7 +145,7 @@ const downloadFile = (filename: string, content: string) => {
             <main className="px-4 pt-3 pb-4 space-y-3">
               <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
                 {path ? (
-                  <span>
+                  <>
                     Your space is live at{" "}
                     <a
                       href={`https://huggingface.co/spaces/${path}`}
@@ -165,7 +155,7 @@ const downloadFile = (filename: string, content: string) => {
                       huggingface.co/{path}
                     </a>
                     . You can update it by deploying again.
-                  </span>
+                  </>
                 ) : (
                   "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
                 )}
@@ -191,10 +181,20 @@ const downloadFile = (filename: string, content: string) => {
                   Your code has errors. Fix them before deploying.
                 </p>
               )}
+
+              {/* ✅ DOWNLOAD HTML BUTTON */}
+              <button
+                className="mt-2 rounded-full bg-gray-800 px-5 py-2 text-white font-semibold text-xs hover:bg-gray-700 transition-all duration-100"
+                onClick={() => downloadFile("index.html", html)}
+              >
+                Download index.html
+              </button>
+
+              {/* ✅ CREATE / UPDATE SPACE BUTTON */}
               <div className="pt-2 text-right">
                 <button
                   disabled={error || loading || !config.title}
-                  className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                  className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed"
                   onClick={createSpace}
                 >
                   {path ? "Update Space" : "Create Space"}