bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import type { CommentView } from '$lib/api/coves/types'
3 import { t } from '$lib/app/i18n'
4 import { Button } from 'mono-svelte'
5 import { ArrowUturnUp, Icon } from 'svelte-hero-icons/dist'
6 import type { ClassValue } from 'svelte/elements'
7 import Comment from './Comment.svelte'
8
9 interface Props {
10 comment: CommentView
11 meta?: boolean
12 class?: string
13 commentClass?: ClassValue
14 actions?: boolean
15 }
16
17 let {
18 comment,
19 meta = true,
20 class: clazz = '',
21 commentClass = '',
22 actions = true,
23 ...rest
24 }: Props = $props()
25</script>
26
27<div class={['flex flex-col flex-1 rounded-none list-none', clazz]}>
28 {#if meta}
29 <div class="flex flex-row justify-between items-center gap-2">
30 <div class="flex flex-col gap-2">
31 <span class="text-sm text-slate-500 dark:text-zinc-400">
32 {$t('comment.reply')}
33 </span>
34 </div>
35 <Button
36 color="primary"
37 rounding="pill"
38 size="sm"
39 href="/comment/{encodeURIComponent(comment.uri as string)}"
40 class="self-start"
41 >
42 {$t('common.jump')}
43 <Icon src={ArrowUturnUp} size="14" micro />
44 </Button>
45 </div>
46 {/if}
47 <Comment
48 node={{ children: [], comment, depth: 1, expanded: true }}
49 postRef={comment.post}
50 replying={false}
51 {meta}
52 {actions}
53 {...rest}
54 class={commentClass}
55 />
56</div>