58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
|
import ItemArticle from '@/components/Common/ItemArticle';
|
||
|
|
import { DataListArticleNews } from '@/data/article/ListArticleNews';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import Image from 'next/image';
|
||
|
|
|
||
|
|
export const BoxArticleMid = () => {
|
||
|
|
return (
|
||
|
|
<div className="box-article-home-middle flex justify-between gap-2">
|
||
|
|
<div className="box-article-tech col-left-article boder-radius-10 border-box-article">
|
||
|
|
<p className="title-box-article font-[600]">Tin công nghệ</p>
|
||
|
|
<div className="list-article-tech">
|
||
|
|
{DataListArticleNews.slice(0, 9).map((item, index) => (
|
||
|
|
<ItemArticle item={item} key={index} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<Link
|
||
|
|
href="/tin-cong-nghe"
|
||
|
|
className="btn-article-col flex items-center justify-center gap-2 font-[500]"
|
||
|
|
>
|
||
|
|
Xem tất cả
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="col-right-article flex-1">
|
||
|
|
<div className="box-article-hot border-box-article boder-radius-10">
|
||
|
|
<p className="title-box-article font-bold">Tin nổi bật</p>
|
||
|
|
<div className="list-article-hot">
|
||
|
|
{DataListArticleNews.slice(0, 5).map((item, index) => (
|
||
|
|
<div className="item-article flex gap-4" key={index}>
|
||
|
|
<Link href={item.url} className="img-article boder-radius-10 relative">
|
||
|
|
<Image
|
||
|
|
className="boder-radius-10"
|
||
|
|
src={item.image.original}
|
||
|
|
fill
|
||
|
|
alt={item.title}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<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="/tuyen-dung-nhan-vien-ky-thuat-1-2" className="title-article">
|
||
|
|
<h3 className="line-clamp-2 font-[400]">{item.title}</h3>
|
||
|
|
</Link>
|
||
|
|
<p className="time-article flex items-center gap-2">
|
||
|
|
<i className="sprite sprite-clock-item-article"></i>
|
||
|
|
<span>{item.createDate}</span>
|
||
|
|
</p>
|
||
|
|
<p className="descreption-article line-clamp-2">{item.summary}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|