Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const comment = tv({ slots: { root: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-1.5", avatar: "self-center", meta: "flex flex-wrap items-center gap-xs text-foreground-muted", actions: "ml-auto shrink-0", content: "col-start-2", editor: "mt-2xs", markup: "markup mt-2xs", plain: "mt-2xs whitespace-pre-wrap text-foreground-default", reactions: "mt-xs" }, variants: { variant: { top: { root: "border-b border-border-default bg-background-default p-sm pb-lg" }, reply: { root: "pt-sm pr-md pb-md" } }, deleted: { true: { root: "block text-foreground-muted italic" } } }, defaultVariants: { variant: "top" } });
export type CommentVariants = VariantProps<typeof comment>;</script>
<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?: CommentVariants["variant"]; 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();
const classes = $derived(comment({ variant, deleted }));</script>
{#if deleted} <div class={classes.root()}>This comment was deleted.</div>{:else} <div class={classes.root()}> <div class={classes.avatar()}> <ProfilePopover identifier={authorDid}> <VouchAvatar did={authorDid} handle={authorHandle} size="large" /> </ProfilePopover> </div> <div class={classes.meta()}> <ProfilePopover identifier={authorDid}> <User handle={authorHandle} did={authorDid} showImage={false} link /> </ProfilePopover> <Separator variant="dot" /> <TimeAgo value={createdAt} /> {#if actions} <div class={classes.actions()}>{@render actions()}</div> {/if} </div> <div class={classes.content()}> {#if editor} <div class={classes.editor()}>{@render editor()}</div> {:else if bodyHtml} <article class={classes.markup()} use:enhanceCodeblocks={bodyHtml}> <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup --> {@html bodyHtml} </article> {:else if body} <article class={classes.plain()}>{body}</article> {/if} {#if !editor} <Reactions {reactions} {subjectUri} onchange={onreactionschange} class={classes.reactions()} /> {/if} </div> </div>{/if}