85 lines
4.2 KiB
TypeScript
85 lines
4.2 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { FaTags, FaCalendarAlt } from 'react-icons/fa';
|
||
|
||
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 my-4 py-16 w-full">
|
||
<div className="blogposts">
|
||
{blogposts.map((blogpost, index) => (
|
||
<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 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="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>
|
||
</div>
|
||
);
|
||
} |