fastpocket/Frontend/sections/BlogContent.tsx

41 lines
1.3 KiB
TypeScript

import React from "react";
import Image from "next/image";
function BlogContent({ post }: { post: any }) {
return (
<div className="bg-base-200 px-8 py-12 rounded-lg">
<h1 className="text-3xl text-base-content">{post.title}</h1>
<div className="flex items-center gap-2">
{/* Not sure if name is required */}
<p className="text-base-content">{post.author ?? ""}</p>
<span className="text-base-content">|</span>
<p className="text-base-content">
{new Date(post.date).toLocaleDateString()}
</p>
</div>
<article className="prose prose-img:rounded-xl max-w-none prose-p:text-base-content prose-a:text-primary prose-h2:text-base-content prose-li:text-base-content prose-strong:text-base-content prose-blockquote:pr-2 prose-blockquote:font-normal">
<div className="h-full w-full">
<Image
priority
src={post.imageUrl}
alt="post-image"
width={0}
height={0}
sizes="100%"
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
</div>
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
</article>
</div>
);
}
export default BlogContent;