From dc291b7ec3f9bd7899de95dfff594c50c5f46d5d Mon Sep 17 00:00:00 2001
From: Tim Stirrat <tim.stirrat@gmail.com>
Date: Sun, 1 Sep 2024 10:04:14 +1000
Subject: [PATCH] Hide the sysex behind details, use Button

---
 src/components/SysexPreview.tsx | 40 ++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/SysexPreview.tsx b/src/components/SysexPreview.tsx
index 14dc538..458882a 100644
--- 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);
+}