import { JSXElement, Show } from "solid-js"; import { Post } from "../Util/api"; import CommentsBUtton from "./Buttons/CommentsButton"; import EngagementButton from "./Buttons/Engegament"; import RemovePostButton from "./Buttons/RemovePostButton"; import ReportButton from "./Buttons/Report"; import ToPostButton from "./Buttons/ToPost"; export function PostSegment(props: { post: Post }): JSXElement { const dateOfCreation = new Date(props.post.createdAt).toDateString(); const isEdited = !(props.post.createdAt == props.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="w-26 menu dropdown-content z-[1] rounded-box bg-base-100 p-2 shadow"> <li> <ReportButton /> </li> <li> <RemovePostButton /> </li> </ul> </details> </div> <Show when={isEdited}> <p>This post has been edited</p> </Show> <p class="my-5 text-base">{props.post.content}</p> <div class="card-actions justify-between"> <div class="flex"> <EngagementButton /> <CommentsBUtton /> </div> <ToPostButton post={props.post} /> </div> </div> </div> ); }