759606e966
Modify the layout of the blogpost details section to better align the content vertically. This change ensures the "Posted" date is aligned with the bottom of the blogpost description, creating a more balanced and visually appealing design.
66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import AnimatedLink from '../components/animatedLink';
|
|
import Image from 'next/image';
|
|
|
|
interface BlogPost {
|
|
label: string;
|
|
body: string;
|
|
publish: string;
|
|
get_absolute_url: string;
|
|
}
|
|
|
|
interface BlogAreaProps {
|
|
blogposts: BlogPost[];
|
|
}
|
|
|
|
export default function BlogArea({ blogposts }: BlogAreaProps) {
|
|
return (
|
|
<div className="blog-area py-16 border-t border-white w-full">
|
|
<div className="blogposts">
|
|
{blogposts.map((blogpost, index) => (
|
|
<div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
|
|
<div className="left mr-5">
|
|
<div className="blogpost-image">
|
|
<Image
|
|
src="/images/retrofuturism.webp" // Path to the local image
|
|
alt="Retrospective Science Image"
|
|
width={384} // Set width (in pixels)
|
|
height={384} // Set height (in pixels)
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="right flex flex-col">
|
|
<div className="blogpost-label text-2xl mb-4">
|
|
<h2>
|
|
<AnimatedLink href={blogpost.get_absolute_url}>
|
|
{blogpost.label}
|
|
</AnimatedLink>
|
|
</h2>
|
|
</div>
|
|
<ul className="blogpost-tags flex flex-row space-x-4 mb-4">
|
|
<li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
|
|
<li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
|
|
</ul>
|
|
<div className="blogpost-description text-base mb-4">
|
|
{blogpost.body.slice(0, 512)}...
|
|
</div>
|
|
<div className="blogpost-other flex flex-row justify-between items-end mt-auto">
|
|
<div className="text-base">
|
|
<p>Posted: {blogpost.publish}</p>
|
|
</div>
|
|
<div className="text-2xl">
|
|
<AnimatedLink href={blogpost.get_absolute_url}>
|
|
Read the article
|
|
</AnimatedLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Include Pagination Component Here */}
|
|
</div>
|
|
);
|
|
} |