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 deleted?: boolean;
14 // when provided, replaces the body region (e.g. an inline edit form), leaving
15 // the avatar/handle header untouched so it doesn't shift
16 editor?: Snippet;
17 }
18
19 let {
20 authorHandle,
21 authorDid,
22 createdAt,
23 body,
24 bodyHtml,
25 variant = "top",
26 deleted = false,
27 editor
28 }: Props = $props();
29</script>
30
31{#if deleted}
32 <div
33 class={`text-sm text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
34 >
35 This comment was deleted.
36 </div>
37{:else}
38 <div
39 class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
40 >
41 <div class="shrink-0">
42 <Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
43 </div>
44 <div class="min-w-0 flex-1">
45 <div class="flex flex-wrap items-center gap-x-1 gap-y-1 text-sm text-foreground-subtle">
46 <span class="text-foreground-default">{authorHandle}</span>
47 <span class="before:mr-1 before:content-['·']">
48 <TimeAgo value={createdAt} />
49 </span>
50 </div>
51 {#if editor}
52 <div class="mt-1">{@render editor()}</div>
53 {:else if bodyHtml}
54 <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
55 <article class="markup mt-1">{@html bodyHtml}</article>
56 {:else if body}
57 <article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
58 {/if}
59 </div>
60 </div>
61{/if}