2024-03-08 14:52:20 +01:00
|
|
|
import { JSXElement } from "solid-js";
|
|
|
|
|
|
|
|
import { EngagementIcon } from "../Util/Icons";
|
|
|
|
import { PublicComment } from "../Util/api";
|
2024-03-11 22:07:39 +01:00
|
|
|
import { NewCommentInputArea } from "./NewComment";
|
|
|
|
|
|
|
|
interface CommentProps {
|
|
|
|
comment: PublicComment;
|
|
|
|
}
|
2024-03-06 00:48:19 +01:00
|
|
|
|
2024-03-06 08:10:42 +01:00
|
|
|
/**
|
|
|
|
* Comment is a component that displays a single comment.
|
|
|
|
* @param {Object} props The properties for the Comment component.
|
|
|
|
* @param {string} props.postId The id of the post that the comment is a reply to.
|
|
|
|
* @returns {JSXElement} A JSXElement of a comment
|
|
|
|
*/
|
2024-03-11 22:07:39 +01:00
|
|
|
export function Comment({ comment }: CommentProps): JSXElement {
|
2024-03-06 00:48:19 +01:00
|
|
|
return (
|
2024-03-11 22:07:39 +01:00
|
|
|
<div class="flex min-w-full flex-col rounded-lg border-b-2 border-b-secondary bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
|
2024-03-08 14:52:20 +01:00
|
|
|
<div class="flex flex-row">
|
|
|
|
<div class="pb-2 text-xs text-gray-500">{comment.created_at}</div>
|
2024-03-06 00:48:19 +01:00
|
|
|
</div>
|
2024-03-06 08:10:42 +01:00
|
|
|
<div class="text-sm">{comment.content}</div>
|
2024-03-08 14:52:20 +01:00
|
|
|
|
|
|
|
<div class="flex justify-between py-5 align-baseline">
|
|
|
|
<div class="btn self-start">
|
|
|
|
{/* Placeholder icon, tbd */}
|
|
|
|
<EngagementIcon />
|
|
|
|
</div>
|
2024-03-11 22:07:39 +01:00
|
|
|
<section>
|
|
|
|
<ul class="timeline timeline-vertical">
|
|
|
|
<li>
|
|
|
|
<div class="timeline-start">{comment.created_at}</div>
|
|
|
|
<div class="divider timeline-middle">:</div>
|
|
|
|
<div class="timeline-end timeline-box">{comment.content}</div>
|
|
|
|
<hr />
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<div class="timeline-end">{comment.created_at}</div>
|
|
|
|
<div class="timeline-middle">:</div>
|
|
|
|
<div class="timeline-start timeline-box">{comment.content}</div>
|
|
|
|
<hr />
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</section>
|
2024-03-08 14:52:20 +01:00
|
|
|
</div>
|
2024-03-11 22:07:39 +01:00
|
|
|
<NewCommentInputArea
|
|
|
|
parentCommentId={comment.parent_comment_id}
|
|
|
|
parentPostId={comment.parent_post_id}
|
|
|
|
/>
|
2024-03-06 00:48:19 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|