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 {
5 getAdditionalUserData,
6 getCanEdit,
7 getDidContext,
8 getHandleContext
9 } from '$lib/website/context';
10 import { CardDefinitionsByType } from '../..';
11 import Rating from './Rating.svelte';
12 import { Button } from '@foxui/core';
13
14 let { item }: { item: Item } = $props();
15
16 const data = getAdditionalUserData();
17 // svelte-ignore state_referenced_locally
18 let feed = $state(data[item.cardType] as any);
19
20 let did = getDidContext();
21 let handle = getHandleContext();
22
23 onMount(async () => {
24 if (!feed) {
25 feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
26 did,
27 handle
28 })) as any;
29
30 data[item.cardType] = feed;
31 }
32 });
33
34 let canEdit = getCanEdit();
35</script>
36
37<div class="z-10 flex h-full gap-4 overflow-x-scroll p-4">
38 {#if feed && feed.length > 0}
39 {#each feed as review (review.uri)}
40 {#if review.value.rating !== undefined && review.value.posterUrl}
41 <a
42 rel="noopener noreferrer"
43 target="_blank"
44 class="flex h-full shrink-0"
45 href="https://popfeed.social/review/{review.uri}"
46 >
47 <div
48 class="relative flex aspect-2/3 h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
49 >
50 <img
51 src={review.value.posterUrl}
52 alt=""
53 class="bg-base-200 absolute inset-0 -z-10 h-full w-full object-cover"
54 />
55
56 <div
57 class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-linear-to-t via-transparent"
58 ></div>
59
60 <Rating class="z-10 text-lg" rating={review.value.rating} />
61 </div>
62 </a>
63 {/if}
64 {/each}
65 {:else if feed}
66 <div class="flex h-full w-full flex-col items-center justify-center gap-4 text-center text-sm">
67 No reviews yet.
68 {#if canEdit()}
69 <Button href="https://popfeed.social/" target="_blank" rel="noopener noreferrer">
70 Review something on Popfeed
71 </Button>
72 {/if}
73 </div>
74 {:else}
75 <div
76 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full w-full items-center justify-center text-center text-sm"
77 >
78 Loading reviews...
79 </div>
80 {/if}
81</div>