You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
3.6 KiB
79 lines
3.6 KiB
/* eslint-disable-next-line */
|
|
import NextImage from "next/image";
|
|
import delve from 'dlv';
|
|
|
|
import {getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
|
|
import CardBlog from "../card-blog/card-blog";
|
|
import {format} from "date-fns";
|
|
|
|
export interface HomeSectionBlogProps {
|
|
posts: object[];
|
|
}
|
|
|
|
export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
|
|
const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
|
|
const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
|
|
console.log(firstArticle, otherArticles);
|
|
const [width, height] = getStrapiImageSize(firstArticle[0]);
|
|
return (
|
|
<>
|
|
<section className="container max-w-6xl relative mx-auto relative flex flex-col md:flex-row mb-10 h-auto">
|
|
<div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
|
|
<div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative
|
|
bg-white border-gray-200
|
|
hover:bg-gray-100
|
|
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
|
<div className="flex justify-between items-center absolute left-5 top-5">
|
|
<span
|
|
className="font-bold shadow text-white text-sm">{format(new Date(delve(firstArticle[0], 'attributes.publishedAt', 'Jun 1, 2020')),'dd/MM/yyyy')}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center absolute right-5 top-5">
|
|
<a href={getCategoryUrl(firstArticle[0])}
|
|
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
|
|
{delve(firstArticle[0], 'attributes.category.data.attributes.name', 'N/A')}
|
|
</a>
|
|
</div>
|
|
|
|
<NextImage
|
|
layout="responsive"
|
|
width={width}
|
|
height={height}
|
|
objectFit="contain"
|
|
className="rounded-t"
|
|
src={getStrapiImage(firstArticle[0])}
|
|
alt={delve(firstArticle, '0.title', 'N/A')} />
|
|
|
|
<main className="p-5">
|
|
<div className="mt-2">
|
|
<a
|
|
href={'/blog/' + delve(firstArticle[0], 'attributes.category.data.attributes.slug', '') + '/' + delve(firstArticle[0], 'attributes.slug', '')}
|
|
className="text-xl text-gray-700 font-bold hover:underline">
|
|
{delve(firstArticle[0], 'attributes.title', 'N/A')}
|
|
</a>
|
|
<p className="mt-2 font-light text-sm text-gray-600">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-4">
|
|
<a href={getPostUrl(firstArticle[0])} className="text-blue-500 text-sm hover:underline">Lire l'article</a>
|
|
<div>
|
|
<a href="#" className="flex items-center">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80"
|
|
alt="avatar" className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"/>
|
|
<h3 className="text-gray-700 text-normal font-bold hover:underline">Alex John</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
|
|
{otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index} item={item} />))}
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default HomeSectionBlog;
|