QR Code

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import qrcode from 'qrcode-generator';
4	import type { Snippet } from 'svelte';
5 
6	let {
7		value,
8		size = 128,
9		color = '#000000',
10		backgroundColor = '#FFFFFF',
11		errorCorrection = 'M',
12		margin = 2,
13		class: className,
14		logo,
15		logoSize = 0.2
16	}: {
17		value: string;
18		size?: number;
19		color?: string;
20		backgroundColor?: string;
21		errorCorrection?: 'L' | 'M' | 'Q' | 'H';
22		margin?: number;
23		class?: string;
24		logo?: string | Snippet;
25		logoSize?: number;
26	} = $props();
27 
28	let matrix = $derived.by(() => {
29		if (!value) return [];
30		try {
31			const qr = qrcode(0, errorCorrection);
32			qr.addData(value);
33			qr.make();
34 
35			const count = qr.getModuleCount();
36			const rows = [];
37			for (let r = 0; r < count; r++) {
38				const row = [];
39				for (let c = 0; c < count; c++) {
40					row.push(qr.isDark(r, c));
41				}
42				rows.push(row);
43			}
44			return rows;
45		} catch (e) {
46			console.error('QR Generation failed', e);
47			return [];
48		}
49	});
50 
51	let moduleCount = $derived(matrix.length);
52	let viewBoxSize = $derived(moduleCount + margin * 2);
53</script>
54 
55<div
56	class={cn('relative inline-flex items-center justify-center shrink-0', className)}
57	style:width={`${size}px`}
58	style:height={`${size}px`}
59>
60	<svg
61		viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
62		xmlns="http://www.w3.org/2000/svg"
63		shape-rendering="crispEdges"
64		class="h-full w-full"
65	>
66		<rect width={viewBoxSize} height={viewBoxSize} fill={backgroundColor} />
67 
68		{#each matrix as row, r}
69			{#each row as isDark, c}
70				{#if isDark}
71					<rect x={c + margin} y={r + margin} width="1" height="1" fill={color} />
72				{/if}
73			{/each}
74		{/each}
75	</svg>
76 
77	{#if logo}
78		<div
79			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center bg-background rounded-full p-1 shadow-sm"
80			style:width={`${size * logoSize}px`}
81			style:height={`${size * logoSize}px`}
82		>
83			{#if typeof logo === 'string'}
84				<img src={logo} alt="QR Logo" class="h-full w-full object-contain" />
85			{:else}
86				{@render logo()}
87			{/if}
88		</div>
89	{/if}
90</div>