ec759247e9
Improve the appearance and accessibility of blog post links by removing the underline hover effect and updating the link text to "Read the article".
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
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>
|
|
<Link href={blogpost.get_absolute_url}>
|
|
{blogpost.label}
|
|
</Link>
|
|
</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-center">
|
|
<div className="text-base">
|
|
<p>Posted: {blogpost.publish}</p>
|
|
</div>
|
|
<div className="text-2xl">
|
|
<Link href={blogpost.get_absolute_url}>
|
|
Read the article
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Include Pagination Component Here */}
|
|
</div>
|
|
);
|
|
} |