alice.pds.demo.boltless.dev
This repository has no description
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 bg-surface 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-fg-strong"
20 >
21 {vouch.handle}
22 </a>
23 <span class={`flex items-center gap-1 text-sm ${denounce ? 'text-danger' : 'text-success'}`}>
24 {#if denounce}
25 <ShieldAlert class="size-3.5" aria-hidden="true" />denounced
26 {:else}
27 <ShieldCheck class="size-3.5" aria-hidden="true" />vouched
28 {/if}
29 <span class="text-fg-subtle">· {relativeTime(vouch.createdAt)}</span>
30 </span>
31 </div>
32 </div>
33
34 {#if vouch.reason}
35 <p class="mt-3 text-sm text-fg-muted">{vouch.reason}</p>
36 {/if}
37</article>