Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<script lang="ts"> import { resolve } from "$app/paths"; import ArrowUpRight from "$icon/arrow-up-right"; import ArrowDownLeft from "$icon/arrow-down-left"; import { relativeTime } from "$lib/format"; import type { VouchData } from "./types";
let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
const denounce = $derived(vouch.kind === "denounce"); const outgoing = $derived(vouch.direction === "outgoing");</script>
<div class="relative z-10 -ml-4 flex items-start gap-3"> <div 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"}`} > {#if outgoing} <ArrowUpRight class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`} aria-hidden="true" /> {:else} <ArrowDownLeft class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`} aria-hidden="true" /> {/if} </div>
<div class="mt-1 flex flex-col gap-1"> <div class="flex flex-wrap items-center gap-1 text-foreground-default"> {#if outgoing} <span class="font-medium">{profileLabel}</span> {:else} <a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline" >{vouch.handle}</a > {/if} <span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span> {#if outgoing} <a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline" >{vouch.handle}</a > {:else} <span class="font-medium">{profileLabel}</span> {/if} <span class="text-sm text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span> </div> {#if vouch.reason} <p class="text-sm text-foreground-subtle">{vouch.reason}</p> {/if} </div></div>