Ebube
72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import singlePost from "../../assets/images/single-post/1.jpg";
|
|
import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
|
|
import LazyImage from "../../lib/LazyImage";
|
|
|
|
/**
|
|
* Renders a blog post component.
|
|
* @returns {JSX.Element} The rendered blog post component.
|
|
*/
|
|
function Blog({ blogItem, imgUrl, loader }) {
|
|
// Generate a unique ID
|
|
const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;
|
|
|
|
const imgLoaderStyles = {
|
|
"--loader-width": "750px",
|
|
"--loader-height": "550px",
|
|
};
|
|
|
|
const headerLoaderStyles = {
|
|
"--text-container-width": "300px",
|
|
"--text-container-height": "18px",
|
|
};
|
|
|
|
const bodyTextLoaderStyles = {
|
|
"--text-container-width": "770px",
|
|
"--text-container-height": "15px",
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="single-post-area">
|
|
<div className="post-thumb" style={{ marginTop: "0" }}>
|
|
{loader ? (
|
|
<div style={imgLoaderStyles}>
|
|
<ImageLoader />
|
|
</div>
|
|
) : (
|
|
<LazyImage src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
|
|
)}
|
|
</div>
|
|
{loader ? (
|
|
<div style={headerLoaderStyles}>
|
|
<BlogLoader />
|
|
</div>
|
|
) : (
|
|
<h4 className="article-title">{blogItem?.post_title}</h4>
|
|
)}
|
|
{loader ? (
|
|
<div style={bodyTextLoaderStyles}>
|
|
<BlogLoader />
|
|
</div>
|
|
) : (
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
|
|
></div>
|
|
)}
|
|
</div>
|
|
|
|
{/* <blockquote>
|
|
<p>
|
|
I don't want no agro brilliant are you taking the piss skive off super
|
|
boot chancer don't get shirty.
|
|
</p>
|
|
<cite>Indigo Violet</cite>
|
|
</blockquote> */}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Blog;
|