your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Modal } from '@foxui/core';
3 import QRCodeDisplay from './QRCodeDisplay.svelte';
4
5 export type QRContext = {
6 title?: string;
7 icon?: string;
8 iconColor?: string;
9 };
10
11 let {
12 open = $bindable(false),
13 href,
14 context = {}
15 }: {
16 open: boolean;
17 href: string;
18 context?: QRContext;
19 } = $props();
20</script>
21
22<Modal bind:open closeButton={true} class="max-w-[90vw]! sm:max-w-sm! md:max-w-md!">
23 <div class="flex flex-col items-center justify-center gap-4 p-4">
24 {#if context.title}
25 <div class="text-base-900 dark:text-base-100 text-center text-3xl font-semibold">
26 {context.title}
27 </div>
28 {/if}
29
30 <div class="flex items-center justify-center overflow-hidden rounded-2xl">
31 <QRCodeDisplay
32 url={href}
33 icon={context.icon}
34 iconColor={context.iconColor}
35 class="size-[min(70vw,320px)] sm:size-72 md:size-80"
36 />
37 </div>
38 </div>
39</Modal>