Separate DownloadButton component that can be clicked on

src/components/DownloadButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Workout, generateZwo } from "zwiftout";
+import styled from "styled-components";
+
+const Button = styled.a`
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  padding: 3px 8px;
+  margin-left: 16px;
+  font-size: 14px;
+  color: inherit;
+  text-decoration: none;
+  background-color: #eee;
+  &:hover {
+    background-color: #86af1c;
+    border-color: #86af1c;
+  }
+`;
+
+// Creates .zwo file name from workout name
+const workoutFileName = (name: string): string => name.replace(/[^\w]/, "-").replace(/-+/, "-").toLowerCase() + ".zwo";
+
+const downloadDataUrl = (xml: string): string => URL.createObjectURL(new Blob([xml], { type: "application/xml" }));
+
+export const DownloadButton: React.FC<{ workout: Workout }> = ({ workout }) => {
+  return (
+    <Button download={workoutFileName(workout.name)} href={downloadDataUrl(generateZwo(workout))}>
+      Download
+    </Button>
+  );
+};

src/components/ZwoOutput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Workout, generateZwo } from "zwiftout";
 import styled from "styled-components";
-import { download } from "../download";
+import { DownloadButton } from "./DownloadButton";
 
 const Header = styled.h2`
   font-weight: normal;
@@ -21,25 +21,13 @@ const ShowHideButton = styled.button`
   float: right;
 `;
 
-const DownloadButton = styled.button`
-  border: 1px solid #bbb;
-  border-radius: 3px;
-  padding: 3px 8px;
-  margin-left: 16px;
-`;
-
-// Creates .zwo file name from workout name
-const workoutFileName = (name: string): string => name.replace(/[^\w]/, "-").replace(/-+/, "-").toLowerCase() + ".zwo";
-
 export const ZwoOutput: React.FC<{ workout: Workout }> = ({ workout }) => {
   const [expanded, setExpanded] = useState(false);
   return (
     <div>
       <Header>
         Generated Zwift workout file (.zwo):
-        <DownloadButton onClick={() => download(workoutFileName(workout.name), generateZwo(workout))}>
+        <DownloadButton workout={workout} />
-          Download
-        </DownloadButton>
       </Header>
       <ZwoCode>
         <ShowHideButton onClick={() => setExpanded(!expanded)}>{expanded ? "Hide ZWO" : "Show ZWO"}</ShowHideButton>

src/download.ts

@@ -1,12 +0,0 @@
-export function download(filename: string, xml: string) {
-  const file = new Blob([xml], { type: "application/xml" });
-  const url = URL.createObjectURL(file);
-
-  var a = document.createElement("a");
-  document.body.appendChild(a);
-  a.style.display = "none";
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-}