alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import type { Snippet } from "svelte";
3 import Avatar from "$lib/components/ui/Avatar.svelte";
4 import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
5
6 interface Props {
7 authorHandle: string;
8 authorDid: string;
9 createdAt: string;
10 body: string;
11 bodyHtml: string | null;
12 variant?: "top" | "reply";
13 // when provided, replaces the body region (e.g. an inline edit form), leaving
14 // the avatar/handle header untouched so it doesn't shift
15 editor?: Snippet;
16 }
17
18 let {
19 authorHandle,
20 authorDid,
21 createdAt,
22 body,
23 bodyHtml,
24 variant = "top",
25 editor
26 }: Props = $props();
27</script>
28
29<div
30 class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
31>
32 <div class="shrink-0">
33 <Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
34 </div>
35 <div class="min-w-0 flex-1">
36 <div class="flex flex-wrap items-center gap-x-1 gap-y-1 text-sm text-foreground-subtle">
37 <span class="text-foreground-default">{authorHandle}</span>
38 <span class="before:mr-1 before:content-['·']">
39 <TimeAgo value={createdAt} />
40 </span>
41 </div>
42 {#if editor}
43 <div class="mt-1">{@render editor()}</div>
44 {:else if bodyHtml}
45 <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
46 <article class="markup mt-1">{@html bodyHtml}</article>
47 {:else if body}
48 <article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
49 {/if}
50 </div>
51</div>