From c4626101d5e408078a144178488781a59c7c1520 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Mon, 24 Feb 2025 21:00:47 +0100
Subject: [PATCH] feat: add download button for QR code in dashboard links

---
 components/dashboard/links/QRCode.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index d782c99..cdf8559 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { Button } from '#components'
+import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
 
 const props = defineProps({
@@ -68,14 +70,27 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function downloadQRCode() {
+  qrCode.download({
+    extension: 'png',
+    name: `qr-${props.data}`,
+  })
+}
+
 onMounted(() => {
   qrCode.append(qrCodeEl.value)
 })
 </script>
 
 <template>
-  <div
-    ref="qrCodeEl"
-    :data-text="data"
-  />
+  <div class="flex flex-col items-center gap-4">
+    <div
+      ref="qrCodeEl"
+      :data-text="data"
+    />
+    <Button variant="outline" @click="downloadQRCode">
+      <Download class="w-4 h-4 mr-2" />
+      Download QR Code
+    </Button>
+  </div>
 </template>