42 lines
638 B
Svelte
42 lines
638 B
Svelte
|
<script lang="ts">
|
||
|
import QR from 'qrious'
|
||
|
|
||
|
import { getCSSVariable } from '$lib/utils'
|
||
|
|
||
|
export let label: string
|
||
|
export let value: string
|
||
|
|
||
|
let canvas: HTMLCanvasElement
|
||
|
|
||
|
$: {
|
||
|
new QR({
|
||
|
value,
|
||
|
level: 'Q',
|
||
|
size: 800,
|
||
|
background: getCSSVariable('--ui-bg-0'),
|
||
|
foreground: getCSSVariable('--ui-text-0'),
|
||
|
element: canvas,
|
||
|
})
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<small>{label}</small>
|
||
|
<div>
|
||
|
<canvas bind:this={canvas} />
|
||
|
</div>
|
||
|
|
||
|
<style>
|
||
|
div {
|
||
|
padding: 0.5rem;
|
||
|
width: fit-content;
|
||
|
border: 2px solid var(--ui-bg-1);
|
||
|
background-color: var(--ui-bg-0);
|
||
|
margin-top: 0.125rem;
|
||
|
}
|
||
|
|
||
|
canvas {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
</style>
|