your personal website on atproto - mirror
blento.app
flo-bit.dev
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 { CardDefinitionsByType } from '..';
6 import Rating from './Rating.svelte';
7
8 let { item }: { item: Item } = $props();
9
10 const data = getAdditionalUserData();
11 // svelte-ignore state_referenced_locally
12 let feed = $state(data[item.cardType] as any);
13
14 let did = getDidContext();
15 let handle = getHandleContext();
16
17 onMount(async () => {
18 console.log(feed);
19 if (!feed) {
20 feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
21 did,
22 handle
23 })) as any;
24
25 console.log(feed);
26
27 data[item.cardType] = feed;
28 }
29 });
30</script>
31
32<div class="z-10 flex h-full gap-4 overflow-x-scroll p-4">
33 {#each feed ?? [] as review (review.uri)}
34 {#if review.value.rating !== undefined && review.value.posterUrl}
35 <a
36 rel="noopener noreferrer"
37 target="_blank"
38 class="flex"
39 href="https://popfeed.social/review/{review.uri}"
40 >
41 <div
42 class="relative flex aspect-[2/3] h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
43 >
44 <img
45 src={review.value.posterUrl}
46 alt=""
47 class="bg-base-200 absolute inset-0 -z-10 h-full w-full object-cover"
48 />
49
50 <div
51 class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-gradient-to-t via-transparent"
52 ></div>
53
54 <Rating class="z-10 text-lg" rating={review.value.rating} />
55 </div>
56 </a>
57 {/if}
58 {/each}
59</div>