Hide the sysex behind details, use Button

tstirrat · Sep 1, 2024 · dc291b7 · dc291b7
1 parent c52cc5b
commit dc291b7
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/src/components/SysexPreview.tsx b/src/components/SysexPreview.tsx
@@ -1,8 +1,9 @@
 import { Card } from "primereact/card";
 import { Waveform } from "../types";
 import { sysexWaveformMessage, toHex } from "../lib/sysex";
-import { Flex } from "./Flex";
 import { useMemo } from "react";
+import { Button } from "primereact/button";
+import { PrimeIcons } from "primereact/api";
 
 export const SysexPreview: React.FC<{ waveform: Waveform }> = ({
   waveform,
@@ -33,16 +34,35 @@ ${sysex[23]} = SYSEX EOF
     return URL.createObjectURL(blobConfig);
   }, [waveform]);
 
+  const handleDownload = () => {
+    const fileName = "mGB-patch.syx";
+    downloadFile(blobUrl, fileName);
+  };
+
   return (
-    <Card title="Sysex data">
-      <code>
-        <pre>{output}</pre>
-      </code>
-      <Flex row align="end" grow="1">
-        <a href={blobUrl} download="mGB-patch.syx">
-          Download .syx file
-        </a>
-      </Flex>
+    <Card>
+      <Button
+        icon={PrimeIcons.DOWNLOAD}
+        onClick={handleDownload}
+        label="Download .syx file"
+      />
+      <details>
+        <summary>
+          <strong>Sysex data</strong>
+        </summary>
+        <code>
+          <pre>{output}</pre>
+        </code>
+      </details>
     </Card>
   );
 };
+
+function downloadFile(blobUrl: string, fileName: string) {
+  const link = document.createElement("a");
+  link.href = blobUrl;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}