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.
73 lines
2.6 KiB
73 lines
2.6 KiB
import delve from 'dlv';
|
|
import {format} from 'date-fns';
|
|
|
|
import styles from './card-blog.module.scss';
|
|
import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface CardBlogProps {
|
|
item: object;
|
|
}
|
|
|
|
export function CardBlog({item}: CardBlogProps) {
|
|
return (
|
|
<div className={styles['card-blog-container'] + " rounded-lg overflow-hidden shadow-sm" +
|
|
" bg-white" +
|
|
" dark:bg-gray-800"}>
|
|
<div className="md:flex">
|
|
<div className="md:shrink-0">
|
|
<img className="h-48 w-full object-cover md:h-full md:w-48 rounded-t-lg"
|
|
src={getStrapiImage(item, 'medium')}
|
|
alt="Modern building architecture" />
|
|
</div>
|
|
<div className="p-4 md:p-8 w-full">
|
|
<div className="flex justify-between items-center">
|
|
<span
|
|
className="font-light text-sm
|
|
text-gray-600
|
|
dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
|
|
<a href={getCategoryUrl(item)}
|
|
className="px-2 py-1 text-sm font-bold rounded
|
|
bg-gray-600 text-gray-100
|
|
hover:bg-gray-500">
|
|
{delve(item, 'attributes.category.data.attributes.name', 'N/A')}
|
|
</a>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CardBlog;
|