48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
|
import { useNavigate } from "@solidjs/router";
|
||
|
|
import { JSXElement, Show } from "solid-js";
|
||
|
|
|
||
|
|
import { Arrow, EngagementIcon } from "../Util/Icons";
|
||
|
|
import { Post } from "../Util/api";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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 nav = useNavigate();
|
||
|
|
|
||
|
|
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">
|
||
|
|
<h3>{dateOfCreation}</h3>
|
||
|
|
<Show when={isEdited}>
|
||
|
|
<p>This post has been edited</p>
|
||
|
|
</Show>
|
||
|
|
<p class="break-words text-base-content md:pt-2">{post.content}</p>
|
||
|
|
<div class="card-actions justify-between">
|
||
|
|
<button
|
||
|
|
// onClick={(engagement)}
|
||
|
|
class="btn btn-xs hover:border-x-primary"
|
||
|
|
aria-label="Show sign of engagement"
|
||
|
|
>
|
||
|
|
<EngagementIcon />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={(): void => nav("/post/" + post.id)}
|
||
|
|
class="btn btn-xs"
|
||
|
|
aria-label="View post"
|
||
|
|
>
|
||
|
|
<Arrow />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|