44 lines
2.1 KiB
TypeScript
44 lines
2.1 KiB
TypeScript
import type { PostContent } from "./post";
|
|
import { Link } from "react-router";
|
|
|
|
export interface StaticPostProps {
|
|
postContent: PostContent
|
|
}
|
|
|
|
// This is a version of Post without logic that just takes the content directly.
|
|
// Doing this cuts down on loading time since we don't have to manually view every reply.
|
|
export default function StaticPost({ postContent }: StaticPostProps) {
|
|
let name = "";
|
|
if (postContent.author?.display_name) {
|
|
name = postContent.author?.display_name
|
|
} else {
|
|
name = postContent.author?.name
|
|
}
|
|
console.debug(postContent.author?.name);
|
|
|
|
return (
|
|
<div className="flex-col w-fit">
|
|
<div className="bg-[#151515] rounded-2xl ring-1 ring-[#333] hover:ring-[#ddd] shadow-black/10 shadow-md transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-102 hover:ring-1 p-4 m-5 w-fit">
|
|
<div className="flex items-baseline pb-2">
|
|
<p className="text-[10px] pr-2">#{postContent.id}</p>
|
|
<p className="text-xl font-bold pr-2">{postContent.title}</p>
|
|
<p className="pr-2">{name}</p>
|
|
<p className="text-[10px] pr-2">Created at: {postContent.createdAt}</p>
|
|
<p className="text-[10px] pr-2">Parent: #{postContent.parentId}</p>
|
|
</div>
|
|
<p className="text-md">{postContent.content}</p>
|
|
<div className="mb-2 my-4 flex gap-4">
|
|
<Link to="/create" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">Reply</Link>
|
|
<Link to="/view" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">View</Link>
|
|
</div>
|
|
</div>
|
|
<div className="ml-8">
|
|
{postContent.replies && postContent.replies.length > 0 && (
|
|
postContent.replies.map((reply) => (
|
|
<StaticPost postContent={reply} />
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|