Redesign of comments, now differs more from post, space made for additions regarding replies

client-solid/src/Components/Comment.tsx

@@ -14,11 +14,15 @@ 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 flex-row">
-        <div class="pb-1 text-xs text-gray-500">{comment.created_at}</div>
+    <>
+      <div class="chat chat-start">
+        <time class="text-xs opacity-50">{comment.created_at}</time>
       </div>
-      <div class="text-sm">{comment.content}</div>
-    </div>
+      <div class="chat-bubble">{comment.content}</div>
+      <div class="chat chat-end">
+        <time class="text-xs opacity-50">Reply created_at</time>
+        <div class="chat-bubble">Replies to parent comment if any</div>
+      </div>
+    </>
   );
 }

client-solid/src/Components/CommentSection.tsx

@@ -13,6 +13,8 @@ export function CommentSection({ postId }: { postId: string }): JSXElement {
   const [comments] = createResource(postId, () => getComments(postId, 10, 0));
 
   return (
-    <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
+    <section class="p-5 my-5 bg-base-200 border-b-2 border-b-primary ">
+      <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
+    </section>
   );
 }

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "FrostByte",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}