57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { Article } from '@/types';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
type ItemArticleProps = {
|
|
item: Article;
|
|
};
|
|
|
|
const ItemArticle: React.FC<ItemArticleProps> = ({ item }) => {
|
|
// chọn link: nếu có external_url thì dùng, ngược lại dùng url
|
|
const linkHref = item.external_url && item.external_url !== '' ? item.external_url : item.url;
|
|
|
|
// chọn ảnh: nếu có original thì dùng, ngược lại ảnh mặc định
|
|
const imageSrc =
|
|
item.image?.original && item.image.original !== ''
|
|
? item.image.original
|
|
: '/static/assets/nguyencong_2023/images/not-image.png';
|
|
|
|
// chọn thời gian: ưu tiên article_time, fallback createDate
|
|
const timeDisplay =
|
|
item.article_time && item.article_time !== '' ? item.article_time : item.createDate;
|
|
|
|
return (
|
|
<div className="item-article flex gap-3">
|
|
<Link href={linkHref} className="img-article boder-radius-10 position-relative">
|
|
<Image
|
|
className="boder-radius-10"
|
|
src={imageSrc}
|
|
width={265}
|
|
height={180}
|
|
alt={item.title}
|
|
/>
|
|
{/* icon video nếu cần */}
|
|
<i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
|
|
<i className="sprite sprite-play-youtube incon-play-youtube"></i>
|
|
</Link>
|
|
|
|
<div className="content-article content-article-item flex flex-1 flex-col">
|
|
<Link href={linkHref} className="title-article">
|
|
<h3 className="line-clamp-2 font-[400]">{item.title}</h3>
|
|
</Link>
|
|
|
|
<p className="time-article flex items-center gap-4">
|
|
<i className="sprite sprite-clock-item-article"></i>
|
|
<span>{timeDisplay}</span>
|
|
</p>
|
|
|
|
<p className="descreption-article line-clamp-2">{item.summary}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ItemArticle;
|