alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import EmptyState from "$lib/components/ui/EmptyState.svelte";
3 import TimelineRepoEvent from "./TimelineRepoEvent.svelte";
4 import TimelineStarEvent from "./TimelineStarEvent.svelte";
5 import TimelineFollowEvent from "./TimelineFollowEvent.svelte";
6 import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
7
8 let {
9 feed,
10 emptyMessage = "Nothing here yet."
11 }: { feed: ShTangledFeedGetTimeline.$output["feed"]; emptyMessage?: string } = $props();
12</script>
13
14{#if feed.length > 0}
15 <div class="flex flex-col gap-4">
16 {#each feed as item, i (item.event.uri)}
17 {@const event = item.event}
18 <div class="relative">
19 <!-- connector bridging the gap up to the previous card -->
20 {#if i !== 0}
21 <div class="absolute -top-4 left-8 h-4 w-0.5 bg-border-default" aria-hidden="true"></div>
22 {/if}
23 {#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
24 <TimelineRepoEvent {event} eventAt={item.eventAt} />
25 {:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
26 <TimelineStarEvent {event} eventAt={item.eventAt} />
27 {:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
28 <TimelineFollowEvent {event} eventAt={item.eventAt} />
29 {/if}
30 </div>
31 {/each}
32 </div>
33{:else}
34 <EmptyState message={emptyMessage} />
35{/if}