45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
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 post={props.post} />
|
|
</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 post={props.post} />
|
|
<CommentsBUtton post={props.post} />
|
|
</div>
|
|
<ToPostButton post={props.post} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|