From 85a83a8e5e8246963e70c74d5c6abccc462e768d Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Mon, 30 Sep 2024 15:51:29 +0200
Subject: [PATCH] feat(ui): download button

---
 app.vue | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/app.vue b/app.vue
index 3a91469..4fcf8c0 100644
--- a/app.vue
+++ b/app.vue
@@ -19,6 +19,16 @@ const updateQRCode = async () => {
 
   qrCode.value = canvas.value.toDataURL(`image/${format.value}`);
 };
+
+const downloadQRCode = () => {
+  const link = document.createElement("a");
+  link.href = qrCode.value;
+  link.download = "qrcode.png";
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
 </script>
 
 <template>
@@ -35,5 +45,23 @@ const updateQRCode = async () => {
 
     <canvas ref="canvas" class="hidden" />
     <img :src="qrCode" />
+
+    <UButton
+      icon="i-heroicons-arrow-down-tray"
+      size="sm"
+      color="primary"
+      variant="solid"
+      label="Download"
+      :trailing="false"
+      @click="downloadQRCode"
+    />
+    <UButton
+      icon="i-heroicons-clipboard-document"
+      size="sm"
+      color="primary"
+      variant="solid"
+      label="Copy to clipboard"
+      :trailing="false"
+    />
   </div>
 </template>