Refactor, added navigation to comment button

client-solid/src/Components/Buttons/CommentsButton.tsx

@@ -1,10 +1,18 @@
-import { JSXElement, createSignal, onMount } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+import { JSXElement, createEffect, createSignal, onMount } from "solid-js";
 
 import { CommentsIcon } from "../../Util/Icons";
 import { getCommentCount } from "../../Util/api";
 
 export default function CommentsButton(props: { postId: string }): JSXElement {
   const [commentCount, setCommentCount] = createSignal(0);
+  const [postId, setPostId] = createSignal<string>("");
+
+  const nav = useNavigate();
+
+  createEffect(() => {
+    setPostId(props.postId);
+  });
 
   const handleComments = async (): Promise<void> => {
     try {
@@ -20,7 +28,12 @@ export default function CommentsButton(props: { postId: string }): JSXElement {
 
   return (
     <div class="flex p-1">
+      <button
+        onClick={(): void => nav("/post/" + postId())}
+        class="rounded-base btn btn-xs hover:border-primary"
+      >
         <CommentsIcon />
+      </button>
       <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
         <p style={{ "--value": commentCount() }} />
       </span>

client-solid/src/Components/PostSegment.tsx

@@ -16,7 +16,7 @@ export function PostSegment(props: { post: Post }): JSXElement {
     <div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
       <div class="card-body md:mx-6">
         <div class="flex flex-row justify-between">
-          <p class="text-xs italic">{dateOfCreation}</p>
+          <p class="text-xs">{dateOfCreation}</p>
           <details class="dropdown">
             <summary class="btn btn-sm">...</summary>
             <ul class="w-26 menu dropdown-content z-[1] rounded-box bg-base-100 p-2 shadow">