feat: adds qr code creation for me page

package.json

@@ -48,6 +48,7 @@
 		"@upstash/ratelimit": "^0.3.2",
 		"@upstash/redis": "^1.20.0",
 		"ably": "^1.2.36",
+		"svelte-qrcode": "^1.0.0",
 		"zod": "^3.20.6"
 	}
 }

src/lib/components/QrCode.svelte

@@ -0,0 +1,9 @@
+<script>
+import QrCode from "svelte-qrcode"
+
+export const qrCodeData = 'https://nextrack.vercel.app/';
+</script>
+
+<div class="container">
+    <QrCode value={qrCodeData} />
+</div>

src/routes/[userHandle]/+page.svelte

@@ -9,6 +9,7 @@
 	import type { ActionData, PageData } from './$types';
 	import { isStreamView } from '$lib/client/helpers';
 	import { get } from 'svelte/store';
+	import QrCode from '$lib/components/QrCode.svelte';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -65,6 +66,7 @@
 		border="border-4 border-surface-500"
 		class="mt-8"
 	/>
+	<QrCode qrCodeData={`https://nextrack.vercel.app/${data.username}`} />
 	<h1 class="text-xl font-bold">This is: {data.username?.toUpperCase()}</h1>
 {/if}
 {#if !data.isAcceptingRequests}

types/svelte-qrcode.d.ts

@@ -0,0 +1,13 @@
+declare module 'svelte-qrcode' {
+	import type { SvelteComponentTyped } from 'svelte';
+	interface QRcodeProps {
+		errorCorrection?: string,
+		background?: string,
+		color?: string,
+		size?: string,
+		value: string,
+		padding?: string,
+		className?: string,
+	}
+	export default class QrCode extends SvelteComponentTyped<QRcodeProps> {}
+}