Refactor of posts

client-solid/src/Components/Menu.tsx

@@ -28,6 +28,7 @@ export function Menu(): JSXElement {
           <Home />
         </MenuItem>
         <MenuItem href="/new">
+          {/*Filter component for popular */}
           <Plus />
         </MenuItem>
       </ul>

client-solid/src/Components/Posts.tsx

@@ -23,24 +23,28 @@ export function Posts(): JSXElement {
 }
 
 // This is the card container for a post
-export function PostSegment(props: { post: Post }): JSXElement {
+export function PostSegment({ post } : { post: Post }): JSXElement {
   const nav = useNavigate();
+
   return (
     <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">
+        <h3>
+          {post.createdAt ?? "No Creation Date"}
+        </h3>
         <p class="break-words text-base-content md:px-6 md:pt-2">
-          {props.post?.content}
+          {post.content}
         </p>
         <div class="card-actions justify-between">
           <button
             // onClick={(engagement)}
             class="btn btn-xs hover:border-x-primary"
-            aria-label="View post"
+            aria-label="Show sign of engagement"
           >
             <EngagementIcon />
           </button>
           <button
-            onClick={(): void => nav("/post/" + props.post?.id)}
+            onClick={(): void => nav("/post/" + post.id)}
             class="btn btn-xs"
             aria-label="View post"
           >