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

import { JSXElement, Show } from "solid-js";

import { Post } from "../Util/api";
import EngagementButton from "./Buttons/Engegament";
import ReplyButton from "./Buttons/Replies";
import ReportButton from "./Buttons/Report";
import ToPostButton from "./Buttons/ToPost";
import RemovePostButton from "./Buttons/RemovePostButton";

/**
 * PostSegment is used to display posts in both the main feed and the post view
 *
 * @param {Object} props The properties for the PostSegment component.
 * @param {Post} props.post The post to display.
 * @returns {JSXElement} A JSXElement of a post
 */
export function PostSegment({ post }: { post: Post }): JSXElement {
  const dateOfCreation = new Date(post.createdAt).toDateString();
  const isEdited = !(post.createdAt == post.updatedAt);

  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 md:mx-6">
        <div class="flex flex-row justify-between">
          <p class="text-xs">{dateOfCreation}</p>
          <details class="dropdown">
            <summary class="btn m-1">...</summary>
            <ul class="menu dropdown-content z-[1] w-26 rounded-box bg-base-100 p-2 shadow">
              <li>
                <ReportButton />
              </li>
              <li>
                <RemovePostButton post={post}/>
              </li>
            </ul>
          </details>
        </div>
        <Show when={isEdited}>
          <p>This post has been edited</p>
        </Show>
        <p class="my-5 text-base">{post.content}</p>
        <div class="card-actions justify-between">
          <div class="flex">
            <EngagementButton post={post} />
            <ReplyButton post={post} />
          </div>
          <ToPostButton post={post} />
        </div>
      </div>
    </div>
  );
}