flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { onMount } from 'svelte';
4 import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
5 import { NpmxLikesCardDefinition } from '.';
6 import { RelativeTime } from '@foxui/time';
7
8 interface NpmxLike {
9 uri: string;
10 value: {
11 subjectRef: string;
12 createdAt: string;
13 };
14 }
15
16 let { item }: { item: Item } = $props();
17
18 const data = getAdditionalUserData();
19 // svelte-ignore state_referenced_locally
20 let feed = $state(data[item.cardType] as NpmxLike[] | undefined);
21
22 let did = getDidContext();
23 let handle = getHandleContext();
24
25 onMount(async () => {
26 if (feed) return;
27
28 feed = (await NpmxLikesCardDefinition.loadData?.([], {
29 did,
30 handle
31 })) as NpmxLike[] | undefined;
32
33 data[item.cardType] = feed;
34 });
35
36 function getPackageName(like: NpmxLike): string {
37 return like.value.subjectRef.split('/package/')[1] ?? like.value.subjectRef;
38 }
39</script>
40
41{#snippet likeItem(like: NpmxLike)}
42 <div class="flex w-full items-center gap-3">
43 <div
44 class="text-accent-500 accent:text-accent-950 flex size-8 shrink-0 items-center justify-center"
45 >
46 <svg
47 xmlns="http://www.w3.org/2000/svg"
48 fill="none"
49 viewBox="0 0 24 24"
50 stroke-width="1.5"
51 stroke="currentColor"
52 class="size-5"
53 >
54 <path
55 stroke-linecap="round"
56 stroke-linejoin="round"
57 d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
58 />
59 </svg>
60 </div>
61 <div class="min-w-0 flex-1">
62 <div class="inline-flex w-full max-w-full items-baseline justify-between gap-2">
63 <div
64 class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate text-sm font-semibold"
65 >
66 {getPackageName(like)}
67 </div>
68 {#if like.value.createdAt}
69 <div class="text-base-500 dark:text-base-400 accent:text-white/60 shrink-0 text-xs">
70 <RelativeTime date={new Date(like.value.createdAt)} locale="en-US" /> ago
71 </div>
72 {/if}
73 </div>
74 </div>
75 </div>
76{/snippet}
77
78<div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4">
79 {#if feed && feed.length > 0}
80 {#each feed as like (like.uri)}
81 <a
82 href="https://npmx.dev/package/{getPackageName(like)}"
83 target="_blank"
84 rel="noopener noreferrer"
85 class="w-full"
86 >
87 {@render likeItem(like)}
88 </a>
89 {/each}
90 {:else if feed}
91 <div
92 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
93 >
94 No liked packages found.
95 </div>
96 {:else}
97 <div
98 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
99 >
100 Loading likes...
101 </div>
102 {/if}
103</div>