alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import VouchCard from "../VouchCard.svelte";
3 import Section from "$lib/components/ui/Section.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 title="Vouches"
17 empty={vouches.length === 0}
18 emptyMessage="No vouches yet."
19 listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
20>
21 <div class="absolute top-8 bottom-8 z-0 w-0.5 bg-border-default"></div>
22 {#each vouches as vouch (vouch.uri)}
23 <VouchCard {vouch} {profileLabel} />
24 {/each}
25</Section>