Sanketgiriji commited on
Commit
604cfe9
·
verified ·
1 Parent(s): 5680859

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

Browse files
src/components/deploy-button/deploy-button.tsx CHANGED
@@ -1,23 +1,23 @@
1
- function DeployButton({
2
- html,
3
- error,
4
- }: {
5
- html: string;
6
- error?: boolean;
7
- }) {
 
 
 
 
 
 
 
8
  const [loading, setLoading] = useState(false);
9
 
10
  const handleDownload = () => {
11
- if (error) return; // optional check
12
  setLoading(true);
13
  setTimeout(() => {
14
- const blob = new Blob([html], { type: "text/html" });
15
- const url = URL.createObjectURL(blob);
16
- const a = document.createElement("a");
17
- a.href = url;
18
- a.download = "index.html";
19
- a.click();
20
- URL.revokeObjectURL(url);
21
  setLoading(false);
22
  }, 300);
23
  };
@@ -28,14 +28,16 @@ function DeployButton({
28
  className={classNames(
29
  "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",
30
  {
31
- "opacity-50 cursor-not-allowed": loading || error,
32
  }
33
  )}
34
  onClick={handleDownload}
35
- disabled={loading || error}
36
  >
37
  {loading ? "Preparing..." : "Download HTML"}
38
  </button>
39
  </div>
40
  );
41
  }
 
 
 
1
+ import { useState } from "react";
2
+ import classNames from "classnames";
3
+
4
+ const downloadFile = (filename: string, content: string) => {
5
+ const blob = new Blob([content], { type: "text/html" });
6
+ const url = URL.createObjectURL(blob);
7
+ const a = document.createElement("a");
8
+ a.href = url;
9
+ a.download = filename;
10
+ a.click();
11
+ URL.revokeObjectURL(url);
12
+ };
13
+
14
+ function DeployButton({ html }: { html: string }) {
15
  const [loading, setLoading] = useState(false);
16
 
17
  const handleDownload = () => {
 
18
  setLoading(true);
19
  setTimeout(() => {
20
+ downloadFile("index.html", html);
 
 
 
 
 
 
21
  setLoading(false);
22
  }, 300);
23
  };
 
28
  className={classNames(
29
  "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",
30
  {
31
+ "opacity-50 cursor-not-allowed": loading,
32
  }
33
  )}
34
  onClick={handleDownload}
35
+ disabled={loading}
36
  >
37
  {loading ? "Preparing..." : "Download HTML"}
38
  </button>
39
  </div>
40
  );
41
  }
42
+
43
+ export default DeployButton;