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.
76 lines
2.7 KiB
76 lines
2.7 KiB
import {format} from "date-fns";
|
|
import NextImage from "next/image";
|
|
import delve from 'dlv';
|
|
|
|
import {contentfulImageLoader, getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface HomeSectionBlogUneProps {
|
|
item: object;
|
|
}
|
|
|
|
export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
|
|
const [width, height] = getStrapiImageSize(item);
|
|
|
|
return (
|
|
<>
|
|
<div className="rounded-lg overflow-hidden shadow-sm
|
|
bg-white
|
|
dark:bg-gray-800">
|
|
<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(item, '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(item)}
|
|
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
|
|
{delve(item, 'attributes.category.data.attributes.name', 'N/A')}
|
|
</a>
|
|
</div>
|
|
|
|
{<NextImage
|
|
loader={contentfulImageLoader}
|
|
width={width}
|
|
height={height}
|
|
className="rounded-t-lg"
|
|
src={getStrapiImage(item)}
|
|
alt={delve(item, '0.title', 'N/A')} />}
|
|
|
|
<main className="p-5">
|
|
<div className="mt-2">
|
|
<a
|
|
href={getPostUrl(item)}
|
|
className="text-xl font-bold hover:underline
|
|
text-gray-700
|
|
dark:text-gray-200">
|
|
{delve(item, 'attributes.title', 'N/A')}
|
|
</a>
|
|
<p className="mt-2 font-light text-sm
|
|
text-gray-600
|
|
dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-4">
|
|
<a href={getPostUrl(item)}
|
|
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-normal font-bold hover:underline
|
|
text-gray-700
|
|
dark:text-gray-300">Alex John</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default HomeSectionBlogUne;
|