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

✨ feat: add posts page, changed icons to react-icons

Browse Source
This commit is contained in:
Константин Адер
2026-01-20 01:51:12 +03:00
parent 873b4bfc0d
commit 700073571e
7 changed files with 189 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
components/blogpost.tsx
View File

@@ -1,11 +1,8 @@
'use client';
import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg'
import Link from 'next/link';
import AnimatedLink from '../components/animatedLink';
import Image from 'next/image';
import { FaTags, FaCalendarAlt } from 'react-icons/fa';
interface BlogPost {
label: string;
@@ -21,55 +18,68 @@ interface BlogAreaProps {
export default function BlogArea({ blogposts }: BlogAreaProps) {
return (
<div className="blog-area pt-16 pb-8 w-full">
<div className="blog-area my-4 py-16 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 key={index}>
<div className="blogpost flex flex-row overflow-hidden">
<div className="left mr-5">
<div className="blogpost-image">
<Link href={blogpost.get_absolute_url}>
<Image
src="/images/retrofuturism.webp"
alt="Retrospective Science Image"
width={384}
height={384}
className="rounded-lg"
/>
</Link>
</div>
</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 key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></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>
<div className="right flex flex-col w-full">
<div className="blogpost-label text-2xl mb-4">
<h2>
<Link href={blogpost.get_absolute_url}>
{blogpost.label}
</Link>
</h2>
</div>
<ul className="blogpost-tags inline-flex items-center flex-row space-x-3 mb-4">
<li className="tag inline px-2 py-1 rounded-full">
<FaTags className="inline-flex justify-baseline text-gray-800 dark:text-gray-200" size={24} />
</li>
{blogpost.tags.map((tag, index) => (
<li key={`${tag}-${index}`} className="tag inline border border-gray-700 px-3 py-1 rounded-full text-base">
<Link href="#">{tag}</Link>
</li>
))}
</ul>
<div className="text-xl">
<AnimatedLink href={blogpost.get_absolute_url}>
Read the article
</AnimatedLink>
<div className="blogpost-description text-base mb-4 dark:text-gray-300 text-gray-800">
{blogpost.body.slice(0, 512)}...
</div>
<div className="blogpost-other flex flex-row justify-between items-end mt-auto">
<div className="text-base inline-flex justify-end items-center">
<div className="inline px-2 py-1">
<FaCalendarAlt className="text-gray-800 dark:text-gray-200" size={24} />
</div>
<div className="inline">
<p className='inline mx-2'>{blogpost.publish}</p>
</div>
</div>
<div className="text-xl">
<Link href={blogpost.get_absolute_url}>
Читать →
</Link>
</div>
</div>
</div>
</div>
{index < blogposts.length - 1 && (
<hr className="my-8 border-t border-gray-200 dark:border-gray-700" />
)}
</div>
))}
</div>
{/* Include Pagination Component Here */}
</div>
);
}