tangled.org
Monorepo for Tangled
tangled.org
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import Avatar from "$lib/components/ui/Avatar.svelte";
4 import ShieldCheck from "$icon/shield-check";
5 import ShieldAlert from "$icon/shield-alert";
6 import { relativeTime } from "$lib/format";
7 import type { VouchData } from "./types";
8
9 let { vouch }: { vouch: VouchData } = $props();
10 const denounce = $derived(vouch.kind === "denounce");
11</script>
12
13<article class="rounded border border-border-default bg-background-default px-6 py-4 shadow-sm">
14 <div class="flex items-center gap-4">
15 <Avatar src={vouch.avatar} handle={vouch.handle} size="size-12" />
16 <div class="min-w-0 flex-grow">
17 <a
18 href={resolve(`/${vouch.handle}` as "/")}
19 class="block truncate font-medium text-foreground-default"
20 >
21 {vouch.handle}
22 </a>
23 <span
24 class={`flex items-center gap-1 text-sm ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
25 >
26 {#if denounce}
27 <ShieldAlert class="size-3.5" aria-hidden="true" />denounced
28 {:else}
29 <ShieldCheck class="size-3.5" aria-hidden="true" />vouched
30 {/if}
31 <span class="text-foreground-subtle">· {relativeTime(vouch.createdAt)}</span>
32 </span>
33 </div>
34 </div>
35
36 {#if vouch.reason}
37 <p class="mt-3 text-sm text-foreground-muted">{vouch.reason}</p>
38 {/if}
39</article>