e77cdd07eb
The changes in this commit include: - Add a search icon to the header, which is implemented using the `Image` component from Next.js. - Update the header layout to have a more balanced and centered design, with the site title and search icon aligned. - Adjust the spacing and typography of the header elements to improve the overall visual appearance. These changes are made to enhance the user experience of the header, making it more visually appealing and functional.
74 lines
3.5 KiB
TypeScript
74 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import tagsPic from '../public/tags.svg';
|
|
import calendarPic from '../public/calendar.svg'
|
|
|
|
import AnimatedLink from '../components/animatedLink';
|
|
import Image from 'next/image';
|
|
|
|
interface BlogPost {
|
|
label: string;
|
|
body: string;
|
|
publish: string;
|
|
get_absolute_url: string;
|
|
tags: string[];
|
|
}
|
|
|
|
interface BlogAreaProps {
|
|
blogposts: BlogPost[];
|
|
}
|
|
|
|
export default function BlogArea({ blogposts }: BlogAreaProps) {
|
|
return (
|
|
<div className="blog-area pt-16 pb-8 w-full">
|
|
<div className="blogposts">
|
|
{blogposts.map((blogpost, index) => (
|
|
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
|
|
<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 w-full">
|
|
<div className="blogpost-label text-2xl mb-4">
|
|
<h2>
|
|
<AnimatedLink href={blogpost.get_absolute_url}>
|
|
{blogpost.label}
|
|
</AnimatedLink>
|
|
</h2>
|
|
</div>
|
|
<ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
|
|
<li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
|
|
{blogpost.tags.map((tag, index) => (
|
|
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</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">
|
|
<ul className="text-base inline-flex justify-end items-center">
|
|
<li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
|
|
<li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
|
|
</ul>
|
|
|
|
<div className="text-xl">
|
|
<AnimatedLink href={blogpost.get_absolute_url}>
|
|
Read the article
|
|
</AnimatedLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Include Pagination Component Here */}
|
|
</div>
|
|
);
|
|
} |