alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import VouchCard from "../VouchCard.svelte";
3 import EmptyState from "../EmptyState.svelte";
4 import type { VouchData } from "../types";
5
6 let {
7 vouches,
8 isSelf,
9 profileHandle
10 }: { vouches: VouchData[]; isSelf: boolean; profileHandle: string } = $props();
11
12 const profileLabel = $derived(isSelf ? "you" : profileHandle);
13</script>
14
15<section>
16 <h2 class="px-2 pb-4 text-base font-medium">Vouches</h2>
17 {#if vouches.length === 0}
18 <EmptyState message="No vouches yet." />
19 {:else}
20 <div class="relative ml-5 flex flex-col gap-6 border border-transparent px-4">
21 <div class="absolute bottom-8 top-8 z-0 w-0.5 bg-border-default"></div>
22 {#each vouches as vouch (vouch.uri)}
23 <VouchCard {vouch} {profileLabel} />
24 {/each}
25 </div>
26 {/if}
27</section>