Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at sl/gitmirror
123456789101112131415161718192021222324252627282930313233343536373839404142434445<script lang="ts"> import History from "$icon/history"; import Route from "$icon/route"; import EmptyState from "$lib/components/ui/EmptyState.svelte"; import Pending from "$lib/components/ui/Pending.svelte"; import PreviewCard from "$lib/components/timeline/PreviewCard.svelte"; import PreviewEmpty from "$lib/components/timeline/PreviewEmpty.svelte"; import RecentItem, { recentPath } from "$lib/components/timeline/RecentItem.svelte"; import timelineRecentspreviewSkeletonFixture from "$lib/bones/timeline-recentspreview--skeleton-fixture.bones.json"; import Bones from "$lib/components/ui/Bones.svelte"; import type { RecentItemData } from "$lib/components/timeline/types";
let { items = [] }: { items?: RecentItemData[] | Promise<RecentItemData[]> } = $props();</script>
{#snippet content(resolvedItems: RecentItemData[])} {#if resolvedItems.length > 0} <div class="relative flex flex-col rounded-b bg-background-default"> <!-- the thread the avatars and badges sit on, centred on the icon column --> <div class="absolute inset-y-0 w-px bg-border-default" style="left: 1.875rem"></div> {#each resolvedItems as item (recentPath(item))} <RecentItem {item} /> {/each} </div> {:else} <PreviewEmpty icon={Route}> <EmptyState size="inline" message="No recent pages yet." class="justify-center" /> </PreviewEmpty> {/if}{/snippet}
<PreviewCard title="Recents" icon={History}> {#if items instanceof Promise} <Pending> {#snippet skeleton()} <Bones capture={timelineRecentspreviewSkeletonFixture} /> {/snippet} {@const resolved = await items} {@render content(resolved)} </Pending> {:else} {@render content(items)} {/if}</PreviewCard>