Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<script lang="ts"> import { resolve } from "$app/paths"; 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";
let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();
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={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} <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>