86 lines
1.6 KiB
Svelte
86 lines
1.6 KiB
Svelte
<script>
|
|
import moment from "moment";
|
|
import Avatar from "./avatar.svelte";
|
|
import Mention from "./mention.svelte";
|
|
import Rating from "./rating.svelte";
|
|
|
|
/**
|
|
* @type {import("$types/base").CommentTreeNode}
|
|
*/
|
|
export let commentNode;
|
|
|
|
/**
|
|
* @type {(function(import("$types/base").Comment): string[]) | undefined}
|
|
*/
|
|
export let getTags = undefined;
|
|
|
|
$: comment = commentNode.parent;
|
|
|
|
$: tags = getTags ? getTags(comment) : [];
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.message {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex: 1;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topBar {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 8px;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nameField {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 8px;
|
|
|
|
& > .tag {
|
|
color: var(--white-dim);
|
|
}
|
|
}
|
|
|
|
.date {
|
|
color: var(--white-dim);
|
|
}
|
|
</style>
|
|
|
|
<div class="message">
|
|
<Avatar size={48}></Avatar>
|
|
<div class="content">
|
|
<div class="topBar">
|
|
<div class="nameField">
|
|
<Mention user={comment.author}></Mention>
|
|
{#each tags as tag}
|
|
<span class="tag typeContent">{tag}</span>
|
|
{/each}
|
|
</div>
|
|
|
|
<span class="date">{moment(comment.commentDate).fromNow()}</span>
|
|
</div>
|
|
|
|
<p>{comment.content}</p>
|
|
|
|
<div class="actionBar">
|
|
<Rating rating={comment.rating}></Rating>
|
|
</div>
|
|
|
|
<div class="replyTree">
|
|
{#each commentNode.children as reply}
|
|
<svelte:self commentNode={reply} getTags={getTags}></svelte:self>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|