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

import { JSXElement } from "solid-js";

import { EngagementIcon } from "../Util/Icons";
import { PublicComment } from "../Util/api";
import { NewCommentInputArea } from "./NewComment";

interface CommentProps {
  comment: PublicComment;
}

/**
 * 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 {
  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>
      </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}
      />
    </div>
  );
}