alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import ArrowUpRight from "$icon/arrow-up-right";
4 import ArrowDownLeft from "$icon/arrow-down-left";
5 import { relativeTime } from "$lib/format";
6 import type { VouchData } from "./types";
7
8 let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
9
10 const denounce = $derived(vouch.kind === "denounce");
11 const outgoing = $derived(vouch.direction === "outgoing");
12</script>
13
14<div class="relative z-10 -ml-4 flex items-start gap-3">
15 <div
16 class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${denounce ? "bg-background-danger-subtle" : "bg-background-success-subtle"}`}
17 >
18 {#if outgoing}
19 <ArrowUpRight
20 class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
21 aria-hidden="true"
22 />
23 {:else}
24 <ArrowDownLeft
25 class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
26 aria-hidden="true"
27 />
28 {/if}
29 </div>
30
31 <div class="mt-1 flex flex-col gap-1">
32 <div class="flex flex-wrap items-center gap-1 text-foreground-default">
33 {#if outgoing}
34 <span class="font-medium">{profileLabel}</span>
35 {:else}
36 <a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
37 >{vouch.handle}</a
38 >
39 {/if}
40 <span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span>
41 {#if outgoing}
42 <a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
43 >{vouch.handle}</a
44 >
45 {:else}
46 <span class="font-medium">{profileLabel}</span>
47 {/if}
48 <span class="text-sm text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
49 </div>
50 {#if vouch.reason}
51 <p class="text-sm text-foreground-subtle">{vouch.reason}</p>
52 {/if}
53 </div>
54</div>