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 '$lib/components/qr/QRCodeDisplay.svelte';
4 import type { ContentComponentProps } from '../types';
5 import { parseVCardName, parseVCardOrg } from '.';
6
7 let { item }: ContentComponentProps = $props();
8
9 let showQR = $state(false);
10
11 let displayName = $derived(
12 item.cardData.displayName || parseVCardName(item.cardData.vcard || '') || 'Contact'
13 );
14 let org = $derived(parseVCardOrg(item.cardData.vcard || ''));
15</script>
16
17<button
18 class="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-3"
19 onclick={() => (showQR = true)}
20 ><div
21 class="text-base-500 dark:text-base-400 accent:text-base-700 text-[12px] font-medium tracking-wide uppercase"
22 >
23 vCard
24 </div>
25 <!-- Identification Card icon (Heroicons) -->
26 <svg
27 xmlns="http://www.w3.org/2000/svg"
28 fill="none"
29 viewBox="0 0 24 24"
30 stroke-width="1.5"
31 stroke="currentColor"
32 class="text-base-700 dark:text-base-300 accent:text-base-900 size-10"
33 >
34 <path
35 stroke-linecap="round"
36 stroke-linejoin="round"
37 d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
38 />
39 </svg>
40
41 <div class="text-center">
42 <div class="text-base-900 dark:text-base-100 accent:text-base-900 text-sm font-semibold">
43 {displayName}
44 </div>
45 {#if org}
46 <div class="text-base-600 dark:text-base-400 accent:text-base-800 text-xs">
47 {org}
48 </div>
49 {/if}
50 </div>
51</button>
52
53<Modal bind:open={showQR} closeButton={true} class="max-w-[90vw]! sm:max-w-sm! md:max-w-md!">
54 <div class="flex flex-col items-center justify-center gap-4 p-4">
55 <div class="text-base-900 dark:text-base-100 text-center text-2xl font-semibold">
56 {displayName}
57 </div>
58
59 <div class="flex items-center justify-center overflow-hidden rounded-2xl">
60 <QRCodeDisplay
61 url={item.cardData.vcard || ''}
62 class="size-[min(70vw,320px)] sm:size-72 md:size-80"
63 />
64 </div>
65
66 <p class="text-base-600 dark:text-base-400 text-center text-sm">
67 Scan to add contact to your phone
68 </p>
69 </div>
70</Modal>