your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import type { ContentComponentProps } from '../types';
4 import { CardDefinitionsByType } from '..';
5 import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
6 import { Badge, Button } from '@foxui/core';
7
8 let { item }: ContentComponentProps = $props();
9
10 const data = getAdditionalUserData();
11 // svelte-ignore state_referenced_locally
12 let collections = $state(data[item.cardType] as string[]);
13
14 let did = getDidContext();
15 let handle = getHandleContext();
16
17 onMount(async () => {
18 if (!collections) {
19 collections = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
20 did,
21 handle
22 })) as string[];
23
24 data[item.cardType] = collections;
25 }
26 });
27
28 function getLink(collection: string) {
29 const split = collection.split('.');
30 return `https://pdsls.dev/at://${did}#collections:${split[1]}.${split[0]}`;
31 }
32</script>
33
34<div class="h-full overflow-y-scroll py-4">
35 <div class="mb-4 inline-flex w-full items-center justify-between px-4 font-semibold">
36 <span>My AT Protocol Collections</span>
37
38 {#if collections}
39 <Badge size="md" class="accent:text-accent-950">{collections.length}</Badge>
40 {/if}
41 </div>
42 {#if collections && collections.length > 0}
43 <div class="flex w-full flex-wrap gap-2 overflow-x-hidden overflow-y-scroll px-4">
44 {#each collections as collection (collection)}
45 <Button target="_blank" href={getLink(collection)} size="sm">{collection}</Button>
46 {/each}
47 </div>
48 {:else if collections}
49 <div
50 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
51 >
52 No collections found.
53 </div>
54 {:else}
55 <div
56 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
57 >
58 Loading collections...
59 </div>
60 {/if}
61</div>