Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<script lang="ts"> import type { Snippet } from "svelte"; import Avatar from "$lib/components/ui/Avatar.svelte"; import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import Reactions from "$lib/components/reaction/Reactions.svelte"; import type { ReactionGroup } from "$lib/components/reaction/reactions";
interface Props { authorHandle: string; authorDid: string; createdAt: string; body: string; bodyHtml: string | null; variant?: "top" | "reply"; deleted?: boolean; reactions?: ReactionGroup[]; subjectUri: string; onreactionschange?: (next: ReactionGroup[]) => void; editor?: Snippet; }
let { authorHandle, authorDid, createdAt, body, bodyHtml, variant = "top", deleted = false, reactions = [], subjectUri, onreactionschange, editor }: Props = $props();</script>
{#if deleted} <div class={`text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`} > This comment was deleted. </div>{:else} <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"> <ProfilePopover did={authorDid}> <Avatar did={authorDid} handle={authorHandle} size="large" /> </ProfilePopover> </div> <div class="min-w-0 flex-1"> <div class="flex flex-wrap items-center gap-1 typography-paragraph-small 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} {#if !editor} <Reactions {reactions} {subjectUri} onchange={onreactionschange} class="mt-2" /> {/if} </div> </div>{/if}