2 files changed, 54 insertions, 0 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
new file mode 100644
index 00000000..fcdc6c7d
--- /dev/null
+++ b/src/components/Qr.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { browser } from "$app/env";
+	import { onMount } from 'svelte';
+	import { copy } from '$lib/utils';
+
+	export let image, text;
+
+  let qr;
+
+	onMount(async () => {
+		if (!(browser && text)) return;
+		let { default: QRCodeStyling } = await import('qr-code-styling');
+
+		const qrCode = new QRCodeStyling({
+			width: window.screen.width < 640 ? 250 : 300,
+			type: 'canvas',
+			data: text,
+			backgroundOptions: {
+				color: 'rgba(0, 0, 0, 0)'
+			},
+			dotsOptions: {
+				type: 'rounded'
+			},
+			imageOptions: {
+				hideBackgroundDots: false
+			}
+		});
+
+		while (qr.firstChild) qr.removeChild(qr.lastChild);
+		qrCode.append(qr);
+	});
+</script>
+
+<div bind:this={qr} on:click={() => copy(text)} />
+
+<style>
+	div {
+		@apply 
+      px-5 
+      md:px-0 
+      w-[292px] 
+      h-[302px]
+      md:w-[300px]
+      md:h-[300px]
+      rounded-3xl
+      block
+      md:flex
+      justify-center
+      items-center
+      cursor-pointer
+      mx-auto;
+	}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index eed5d3f3..969e2107 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -14,3 +14,4 @@ export { default as About } from './About.svelte';
 export { default as Footer } from './Footer.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export { default as LocationsMap } from './LocationsMap.svelte';
+export { default as Qr } from './Qr.svelte';