Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<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="typography-paragraph-small text-foreground-placeholder" >{relativeTime(vouch.createdAt)}</span > </div> {#if vouch.reason} <p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p> {/if} </div></div>