Rev 2937 | Rev 3503 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react';
import { addNotification } from '../../../redux/notification/notification.actions';
import { axios } from '../../../utils';
import styles from './HomeSection.module.scss';
export default function HomeNews({ containerClassName = '', suggestionsContainerClassName = '' }) {
const [news, setNews] = useState([])
const loadNews = () => {
axios.get('/helpers/posts')
.then(res => {
if (res.data.success) {
setNews(res.data.data)
}
})
.catch(() => {
addNotification({
style: "error",
msg: "Disculpe, ha ocurrido un error buscando novedades",
});
})
}
useEffect(() => {
loadNews()
}, [])
return (
<div className={containerClassName} style={{ paddingBottom: '5%' }}>
<div className={styles.suggestions}>
<div className="sd-title">
<h3>Articulos</h3>
</div>
<div className="suggestions-list">
{
news.map(element => {
return (
<div key={element.title} className={styles.postsList}>
<img
src={element.image}
alt={`${element.title} image`}
/>
<div className="d-flex flex-column ml-3" style={{ gap: '5px' }}>
<h4>
{element.title}
</h4>
<span>
{element.date}
</span>
</div>
<a
className="btn btn-primary ml-3"
href={element.link}
target="_blank"
rel="noreferrer"
style={{ fontSize: '.9rem', borderRadius: '4px' }}
>
MÁS INF
</a>
</div>
)
})
}
</div>
</div>
</div >
)
}