client-solid/src/Components/Comment.tsx

@@ -1,6 +1,8 @@
 import { JSXElement } from "solid-js";
 
+import { EngagementIcon } from "../Util/Icons";
 import { PublicComment } from "../Util/api";
+import { NewCommentInputArea } from "./NewComment";
 
 interface CommentProps {
   comment: PublicComment;
@@ -14,11 +16,38 @@ interface CommentProps {
  */
 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 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-1 text-xs text-gray-500">{comment.created_at}</div>
+        <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>
   );
 }