Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485<script lang="ts"> import type { Snippet } from "svelte"; import VouchAvatar from "$lib/components/profile/VouchAvatar.svelte"; import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte"; import Separator from "$lib/components/ui/Separator.svelte"; import User from "$lib/components/ui/User.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import Reactions from "$lib/components/reaction/Reactions.svelte"; import { enhanceCodeblocks } from "$lib/markup/highlight"; 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; actions?: Snippet; }
let { authorHandle, authorDid, createdAt, body, bodyHtml, variant = "top", deleted = false, reactions = [], subjectUri, onreactionschange, editor, actions }: Props = $props();</script>
{#if deleted} <div class={`text-foreground-muted italic ${variant === "top" ? "border-b border-border-default bg-background-default p-4 pb-5" : "pt-3 pr-4 pb-4"}`} > This comment was deleted. </div>{:else} <div class={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-1.5 ${variant === "top" ? "border-b border-border-default bg-background-default p-4 pb-5" : "pt-3 pr-4 pb-4"}`} > <div class="self-center"> <ProfilePopover did={authorDid}> <VouchAvatar did={authorDid} handle={authorHandle} size="large" /> </ProfilePopover> </div> <div class="flex flex-wrap items-center gap-2 text-foreground-muted"> <ProfilePopover did={authorDid}> <User handle={authorHandle} did={authorDid} showImage={false} link /> </ProfilePopover> <Separator variant="dot" /> <TimeAgo value={createdAt} /> {#if actions} <div class="ml-auto shrink-0">{@render actions()}</div> {/if} </div> <div class="col-start-2"> {#if editor} <div class="mt-1">{@render editor()}</div> {:else if bodyHtml} <article class="markup mt-1" use:enhanceCodeblocks={bodyHtml}> <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup --> {@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}