From f4b64ff3b83add3e9e34914d90fc883708890732 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 30 Dec 2023 18:40:14 +0800
Subject: [PATCH] qr code add copy to clipboard button

---
 frontend/src/lib/components/QR.svelte        | 25 ++++++++++++++++++--
 frontend/src/routes/(app)/links/+page.svelte |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/QR.svelte b/frontend/src/lib/components/QR.svelte
index 97aacc1..3309429 100644
--- a/frontend/src/lib/components/QR.svelte
+++ b/frontend/src/lib/components/QR.svelte
@@ -1,19 +1,39 @@
 <script>
 	import { onMount } from 'svelte'
 	import { default as QrCode } from 'qrious'
+	import Button from './ui/button/button.svelte'
 
 	const QRcode = new QrCode()
 
 	export let errorCorrection = 'L'
 	export let background = '#fff'
 	export let color = '#000'
-	export let size = '500'
+	export let size = '300'
 	export let value = ''
 	export let padding = 10
 	export let className = 'qrcode'
 
 	let image = ''
 
+	const copyImageToClipboard = async () => {
+		if (!image) return
+		console.log(image)
+
+		const imageData = await fetch(image)
+
+		const imageBlob = await imageData.blob()
+
+		try {
+			navigator.clipboard.write([
+				new ClipboardItem({
+					'image/png': imageBlob,
+				}),
+			])
+		} catch (error) {
+			console.error(error)
+		}
+	}
+
 	function generateQrCode() {
 		QRcode.set({
 			background,
@@ -24,7 +44,7 @@
 			value,
 		})
 
-		image = QRcode.toDataURL('image/jpeg')
+		image = QRcode.toDataURL()
 	}
 
 	export function getImage() {
@@ -43,3 +63,4 @@
 </script>
 
 <img src={image} alt={value} class={className} />
+<Button on:click={copyImageToClipboard}>Copy To Clipboard</Button>
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 76d6dff..6e223f2 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -286,7 +286,7 @@
 				Use this QR code to share the shortener.
 			</Dialog.Description>
 		</Dialog.Header>
-		<div class="flex h-64 justify-center">
+		<div class="flex h-full flex-col items-center gap-4">
 			<Qr value={data.shortener_url + '/' + qrCode} />
 		</div>
 	</Dialog.Content>