AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(BlogArea): Optimize image loading and refactor code

Browse Source 
Optimize the image loading in the BlogArea component by removing the
unnecessary `blogTestPic` import and using the correct path for the
image. Additionally, refactor the code to improve readability and
maintainability.
This commit is contained in:
AderKonstantin
2025-03-01 07:58:21 +03:00
parent ce759a88eb
commit b105fc9ae7
1 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/blogpost.tsx
View File

@@ -3,66 +3,64 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import blogTestPic from './retrofuturism.webp';
interface BlogPost { interface BlogPost {
label: string; label: string;
body: string; body: string;
publish: string; publish: string;
get_absolute_url: string; get_absolute_url: string;
} }
interface BlogAreaProps { interface BlogAreaProps {
blogposts: BlogPost[]; blogposts: BlogPost[];
} }
export default function BlogArea({ blogposts }: BlogAreaProps) { export default function BlogArea({ blogposts }: BlogAreaProps) {
return ( return (
<div className="blog-area py-16 border-t border-white w-full"> <div className="blog-area py-16 border-t border-white w-full">
<div className="blogposts"> <div className="blogposts">
{blogposts.map((blogpost, index) => ( {blogposts.map((blogpost, index) => (
<div key={index} className="blogpost flex flex-row overflow-hidden mb-8"> <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
<div className="left mr-5"> <div className="left mr-5">
<div className="blogpost-image"> <div className="blogpost-image">
<Image <Image
src="/images/retrofuturism.webp" // Path to the local image src="/images/retrofuturism.webp" // Path to the local image
alt="Retrospective Science Image" alt="Retrospective Science Image"
width={384} // Set width (in pixels) width={384} // Set width (in pixels)
height={384} // Set height (in pixels) height={384} // Set height (in pixels)
className="rounded-lg" className="rounded-lg"
/> />
</div> </div>
</div>
<div className="right flex flex-col">
<div className="blogpost-label text-2xl mb-4">
<h2>
<Link href={blogpost.get_absolute_url} className="text-white hover:underline">
{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} className="text-white hover:underline">
Read
</Link>
</div>
</div>
</div>
</div>
))}
</div> </div>
<div className="right flex flex-col"> {/* Include Pagination Component Here */}
<div className="blogpost-label text-2xl mb-4"> </div>
<h2> );
<Link href={blogpost.get_absolute_url} className="text-white hover:underline">
{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} className="text-white hover:underline">
Read
</Link>
</div>
</div>
</div>
</div>
))}
</div>
{/* Include Pagination Component Here */}
</div>
);
} }