34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import { memo } from 'react';
|
|
import { withTranslation } from 'react-i18next';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
function ArticleCard({ t, id, title, description, image, updated }) {
|
|
return (
|
|
<article className="flex flex-col justify-between max-w-[460px] w-full h-[526px] bg-primary-light rounded-20 shadow-light">
|
|
<div>
|
|
<img
|
|
className="w-full h-[230px] mb-20 rounded-20 object-cover"
|
|
src={image}
|
|
alt={title}
|
|
width="460"
|
|
height="230"
|
|
loading="lazy"
|
|
/>
|
|
<h3 className="px-[15px] mb-20 text-xl leading-light font-medium">{title}</h3>
|
|
<p className="px-[15px] text-lg text-common-layout font-light">{description}</p>
|
|
</div>
|
|
<div className="px-[15px] mb-[17px] flex justify-between items-center">
|
|
<p className="text-lg text-common-secondary font-light">{updated}</p>
|
|
<Link
|
|
className="flex items-center justify-center w-[60px] h-[60px] text-secondary-main rounded-full border-2 border-secondary-main"
|
|
to={`/blog/${id}`}
|
|
>
|
|
{t('article_btn')}
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export default withTranslation('homePage')(memo(ArticleCard));
|