FrostByte/client-solid/src/Components/Comment.tsx

54 lines
1.8 KiB
TypeScript
Raw Normal View History

import { JSXElement } from "solid-js";
import { EngagementIcon } from "../Util/Icons";
import { PublicComment } from "../Util/api";
import { NewCommentInputArea } from "./NewComment";
interface CommentProps {
comment: PublicComment;
}
2024-03-06 00:48:19 +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
*/
export function Comment({ comment }: CommentProps): JSXElement {
2024-03-06 00:48:19 +01:00
return (
<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 ">
<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>
<div class="text-sm">{comment.content}</div>
<div class="flex justify-between py-5 align-baseline">
<div class="btn self-start">
{/* Placeholder icon, tbd */}
<EngagementIcon />
</div>
<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>
</div>
<NewCommentInputArea
parentCommentId={comment.parent_comment_id}
parentPostId={comment.parent_post_id}
/>
2024-03-06 00:48:19 +01:00
</div>
);
}