Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<script lang="ts"> import { resolve } from "$app/paths"; import { profileIdentifier } from "#lib/api/identity.ts"; import ArrowUpRight from "$icon/arrow-up-right"; import ArrowDownLeft from "$icon/arrow-down-left"; import TimeAgo from "#lib/components/ui/TimeAgo.svelte"; import type { VouchData } from "#lib/components/profile/types.ts";
let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
const href = $derived(resolve(`/${profileIdentifier(vouch.handle, vouch.did)}` as "/")); const denounce = $derived(vouch.kind === "denounce"); const outgoing = $derived(vouch.direction === "outgoing"); const tone = $derived( denounce ? { bg: "bg-background-danger-subtle", fg: "text-foreground-danger" } : { bg: "bg-background-success-subtle", fg: "text-foreground-success" } );</script>
<div class="relative z-10 -ml-md flex items-start gap-sm"> <div class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${tone.bg}`} > {#if outgoing} <ArrowUpRight class={`size-5 ${tone.fg}`} aria-hidden="true" /> {:else} <ArrowDownLeft class={`size-5 ${tone.fg}`} aria-hidden="true" /> {/if} </div>
<div class="mt-2xs flex flex-col gap-2xs"> <div class="flex flex-wrap items-center gap-2xs text-foreground-default"> {#if outgoing} <span class="font-medium">{profileLabel}</span> {:else} <a {href} class="font-medium hover:underline">{vouch.handle}</a> {/if} <span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span> {#if outgoing} <a {href} class="font-medium hover:underline">{vouch.handle}</a> {:else} <span class="font-medium">{profileLabel}</span> {/if} <TimeAgo value={vouch.createdAt} class="typography-paragraph-small text-foreground-placeholder" /> </div> {#if vouch.reason} <p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p> {/if} </div></div>