update

src/app/pages/Article/HomeArticlePage/BoxArticleMid/index.tsx

@@ -0,0 +1,57 @@
+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 grid grid-cols-3 gap-2">
+      <div className="box-article-tech col-left-article boder-radius-10 border-box-article col-span-2">
+        <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>
+  );
+};