update

src/components/Article/HomeArticle/ArticleTopLeft/index.tsx

@@ -0,0 +1,19 @@
+import ItemArticle from '@/components/Common/ItemArticle';
+import { DataListArticleNews } from '@/data/article/ListArticleNews';
+
+export const ArticleTopLeft = () => {
+  return (
+    <div className="flex gap-3">
+      <div className="box-left">
+        {DataListArticleNews.slice(0, 1).map((item, index) => (
+          <ItemArticle item={item} key={index} />
+        ))}
+      </div>
+      <div className="box-right flex flex-1 flex-col gap-3">
+        {DataListArticleNews.slice(0, 4).map((item, index) => (
+          <ItemArticle item={item} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};

src/components/Article/HomeArticle/ArticleTopRight/index.tsx

@@ -0,0 +1,32 @@
+import { DataListArticleNews } from '@/data/article/ListArticleNews';
+import Link from 'next/link';
+
+export const ArticleTopRight = () => {
+  return (
+    <div className="col-right-article box-view-article flex-1">
+      <form
+        method="get"
+        action="/tim-bai"
+        name="search"
+        className="boder-radius-10 border-box-article article-search-container"
+      >
+        <input type="text" name="q" placeholder="Tìm kiếm bài viết" defaultValue="" />
+        <button type="submit" className="fas fa-search"></button>
+      </form>
+
+      <div className="boder-radius-10 border-box-article">
+        <div className="title-box-article font-bold">Xem nhiều</div>
+        <ul className="list-most-view-article flex flex-col gap-4">
+          {DataListArticleNews.slice(0, 6).map((item, index) => (
+            <li className="item-most-view-article flex items-center gap-2" key={index}>
+              <span className="number flex items-center justify-center font-[600]"></span>
+              <Link href={item.url} className="line-clamp-2 flex-1">
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};

src/components/Article/HomeArticle/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 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>
+  );
+};

src/components/Article/HomeArticle/BoxArticleReview/index.tsx

@@ -0,0 +1,45 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination, Thumbs } from 'swiper/modules';
+import Image from 'next/image';
+import Link from 'next/link';
+import { DataListArticleNews } from '@/data/article/ListArticleNews';
+
+export const BoxArticleReview = () => {
+  return (
+    <div className="box-article-category page-hompage">
+      <div className="box-article-global box-artice-review">
+        <div className="title-box-product-home mb-5 flex flex-col items-center">
+          <p className="title font-[500]">Review sản phẩm</p>
+          <p className="border-title"></p>
+        </div>
+        <div className="list-article-global">
+          <Swiper
+            modules={[Autoplay, Navigation, Pagination, Thumbs]}
+            spaceBetween={15}
+            slidesPerView={3}
+            loop={true}
+          >
+            {DataListArticleNews.map((item, index) => (
+              <SwiperSlide key={index}>
+                <div className="item-article">
+                  <Link href={item.url} className="img-article">
+                    <Image src={item.image.original} fill alt={item.title} />
+                  </Link>
+                  <div className="content-article-item">
+                    <Link href={item.url} className="title font-weight-500 line-clamp-2">
+                      {item.title}
+                    </Link>
+                    <div className="time-aricle-item flex items-center">
+                      <i className="sprite sprite-clock-item-article"></i>
+                      <span>{item.createDate}</span>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Article/HomeArticle/BoxVideoArticle/index.tsx

@@ -0,0 +1,123 @@
+import Link from 'next/link';
+import { FaYoutube } from 'react-icons/fa6';
+import { DataListArticleVideo } from '@/data/article/ListAricleVideo';
+import Image from 'next/image';
+import useFancybox from '@/hooks/useFancybox';
+
+export const BoxVideoArticle = () => {
+  const getYoutubeEmbedUrl = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      // nếu là link youtube dạng watch?v=...
+      if (urlObj.hostname.includes('youtube.com')) {
+        const videoId = urlObj.searchParams.get('v');
+        if (videoId) {
+          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+        }
+      }
+      // nếu là link youtu.be/xxxx
+      if (urlObj.hostname.includes('youtu.be')) {
+        const videoId = urlObj.pathname.replace('/', '');
+        if (videoId) {
+          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+        }
+      }
+      // fallback: trả về chính url
+      return url;
+    } catch {
+      return url;
+    }
+  };
+
+  const [fancyboxRef] = useFancybox({
+    closeButton: 'auto',
+    dragToClose: true,
+  });
+
+  return (
+    <div className="box-video-article boder-radius-10">
+      <div className="title-video-article flex justify-between">
+        <p className="title font-bold">Youtube channel</p>
+        <Link
+          href="https://www.youtube.com/c/NGUYENCONGPC"
+          className="follow-youtube flex items-center gap-2"
+        >
+          <FaYoutube />
+          <span className="font-bold">Theo dõi trên YouTube</span>
+        </Link>
+      </div>
+      <div className="list-video-article flex justify-between gap-2">
+        <div className="box-left" ref={fancyboxRef}>
+          {DataListArticleVideo.slice(0, 1).map((item, index) => (
+            <div className="item-article-video d-flex w-50 gap-10" key={index}>
+              <Link
+                href={getYoutubeEmbedUrl(item.external_url)}
+                className="img-article img-article-video boder-radius-10 relative"
+                data-fancybox
+              >
+                <Image
+                  src={item.image.original}
+                  width={430}
+                  height={310}
+                  className="boder-radius-10"
+                  alt={item.title}
+                />
+
+                <i className="sprite sprite-big-play-video-article icon-play"></i>
+                <Image
+                  className="icon-play-small"
+                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
+                  alt="play"
+                  width={58}
+                  height={41}
+                />
+              </Link>
+              <Link
+                href={getYoutubeEmbedUrl(item.external_url)}
+                className="title-article-video flex-1"
+                data-fancybox
+              >
+                {item.title}
+              </Link>
+            </div>
+          ))}
+        </div>
+        <div className="box-right grid grid-cols-2 gap-2">
+          {DataListArticleVideo.slice(1, 7).map((item, index) => (
+            <div className="item-article-video flex w-50 gap-2" key={index}>
+              <Link
+                href={getYoutubeEmbedUrl(item.external_url)}
+                className="img-article img-article-video boder-radius-10 relative"
+                data-fancybox
+              >
+                <Image
+                  src={item.image.original}
+                  width={430}
+                  height={310}
+                  className="boder-radius-10"
+                  alt={item.title}
+                />
+
+                <i className="sprite sprite-big-play-video-article icon-play"></i>
+                <Image
+                  className="icon-play-small"
+                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
+                  alt="play"
+                  width={58}
+                  height={41}
+                />
+              </Link>
+              <Link
+                href={getYoutubeEmbedUrl(item.external_url)}
+                className="title-article-video flex-1"
+                data-fancybox
+              >
+                {item.title}
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Article/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import { Breadcrumb } from '@components/Common/Breadcrumb';
+import { DataArticleCategory } from '@/data/article/ListCategory';
+
+import { ArticleTopLeft } from './HomeArticle/ArticleTopLeft';
+import { ArticleTopRight } from './HomeArticle/ArticleTopRight';
+import { BoxVideoArticle } from './HomeArticle/BoxVideoArticle';
+import { BoxArticleMid } from './HomeArticle/BoxArticleMid';
+import { BoxArticleReview } from './HomeArticle/BoxArticleReview';
+
+const ArticleHome = () => {
+  const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];
+
+  return (
+    <section className="page-article pb-10">
+      <div className="container">
+        <Breadcrumb items={breadcrumbItems} />
+
+        <div className="tabs-category-article flex items-center">
+          {DataArticleCategory.map((item, index) => (
+            <Link href={item.url} key={index} className="item-tab-article">
+              <h2 className="title-cate-article font-[400]">{item.title}</h2>
+            </Link>
+          ))}
+        </div>
+
+        <div className="box-article-home-top flex gap-3">
+          <div className="col-left-article border-box-article box-new-article boder-radius-10">
+            <div className="flex gap-12">
+              <ArticleTopLeft />
+            </div>
+          </div>
+          <ArticleTopRight />
+        </div>
+
+        {/* box video */}
+        <BoxVideoArticle />
+
+        {/* box mid  */}
+        <BoxArticleMid />
+
+        {/* review */}
+        <BoxArticleReview />
+      </div>
+    </section>
+  );
+};
+
+export default ArticleHome;