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 import Reactions from "$lib/components/reaction/Reactions.svelte";
6 import type { ReactionGroup } from "$lib/components/reaction/reactions";
7
8 interface Props {
9 authorHandle: string;
10 authorDid: string;
11 createdAt: string;
12 body: string;
13 bodyHtml: string | null;
14 variant?: "top" | "reply";
15 deleted?: boolean;
16 reactions?: ReactionGroup[];
17 subjectUri: string;
18 onreactionschange?: (next: ReactionGroup[]) => void;
19 editor?: Snippet;
20 }
21
22 let {
23 authorHandle,
24 authorDid,
25 createdAt,
26 body,
27 bodyHtml,
28 variant = "top",
29 deleted = false,
30 reactions = [],
31 subjectUri,
32 onreactionschange,
33 editor
34 }: Props = $props();
35</script>
36
37{#if deleted}
38 <div
39 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"}`}
40 >
41 This comment was deleted.
42 </div>
43{:else}
44 <div
45 class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
46 >
47 <div class="shrink-0">
48 <Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
49 </div>
50 <div class="min-w-0 flex-1">
51 <div class="flex flex-wrap items-center gap-1 text-sm text-foreground-subtle">
52 <span class="text-foreground-default">{authorHandle}</span>
53 <span class="before:mr-1 before:content-['·']">
54 <TimeAgo value={createdAt} />
55 </span>
56 </div>
57 {#if editor}
58 <div class="mt-1">{@render editor()}</div>
59 {:else if bodyHtml}
60 <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
61 <article class="markup mt-1">{@html bodyHtml}</article>
62 {:else if body}
63 <article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
64 {/if}
65 {#if !editor}
66 <Reactions {reactions} {subjectUri} onchange={onreactionschange} class="mt-2" />
67 {/if}
68 </div>
69 </div>
70{/if}