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

import { JSXElement } from "solid-js";

import { PublicComment } from "../Util/api";

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 px-2 min-w-full flex-col rounded-lg border-b-2 border-b-secondary bg-base-300 py-2 text-base-content transition-all hover:bg-base-300 md:px-12">
      <div class="flex flex-row">
        <div class="pb-1 text-xs text-gray-500">{comment.created_at}</div>
      </div>
      <div class="text-sm">{comment.content}</div>
    </div>
  );
}