Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<script lang="ts"> import type { Snippet } from "svelte"; import Avatar from "$lib/components/ui/Avatar.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
interface Props { authorHandle: string; authorDid: string; createdAt: string; body: string; bodyHtml: string | null; variant?: "top" | "reply"; // when provided, replaces the body region (e.g. an inline edit form), leaving // the avatar/handle header untouched so it doesn't shift editor?: Snippet; }
let { authorHandle, authorDid, createdAt, body, bodyHtml, variant = "top", editor }: Props = $props();</script>
<div class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}> <div class="shrink-0"> <Avatar did={authorDid} handle={authorHandle} size="size-8" tiny /> </div> <div class="min-w-0 flex-1"> <div class="flex flex-wrap items-center gap-x-1 gap-y-1 text-sm text-foreground-subtle"> <span class="text-foreground-default">{authorHandle}</span> <span class="before:mr-1 before:content-['·']"> <TimeAgo value={createdAt} /> </span> </div> {#if editor} <div class="mt-1">{@render editor()}</div> {:else if bodyHtml} <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup --> <article class="markup mt-1">{@html bodyHtml}</article> {:else if body} <article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article> {/if} </div></div>