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.
47 lines
1.9 KiB
47 lines
1.9 KiB
import delve from 'dlv';
|
|
|
|
import styles from './last-articles.module.scss';
|
|
import {environment} from "../../environments/environment";
|
|
import {format} from "date-fns";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface LastArticlesProps {
|
|
items: object[];
|
|
}
|
|
|
|
export function LastArticles({items = []}: LastArticlesProps) {
|
|
return (
|
|
<div
|
|
className={styles['container'] + " rounded-lg mx-2 md:mx-0 mt-5 md:mt-0 p-5 mb-5 shadow-sm" +
|
|
" bg-white" +
|
|
" dark:bg-gray-800"}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Derniers articles publiés</h5>
|
|
</div>
|
|
<div className="flow-root">
|
|
<ul role="list" className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{items.map((item: object, index: number) => (<li key={'last-articles-' + index} className="py-3 sm:py-4">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0 relative">
|
|
<img className="w-[85px] h-[75px] rounded-lg relative top-1"
|
|
src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')}
|
|
alt="Neil image"/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="sm:text-normal lg:text-xl font-medium text-gray-900 dark:text-white">
|
|
{delve(item, 'attributes.title', 'N/A')}
|
|
</p>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{delve(item, 'attributes.category.data.attributes.name', 'N/A')} - {format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LastArticles;
|