update

src/features/Article/HomeArticlePage/BoxVideoArticle/index.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import Link from 'next/link';
+import { FaYoutube } from 'react-icons/fa6';
+import Image from 'next/image';
+import useFancybox from '@/hooks/useFancybox';
+import { getArticleVideos } from '@/lib/api/article';
+import { useApiData } from '@/hooks/useApiData';
+import type { ListArticle } from '@/types/article/TypeListArticle';
+
+export const BoxVideoArticle = () => {
+  const { data: videos } = useApiData(
+    () => getArticleVideos(),
+    [],
+    { initialData: [] as ListArticle },
+  );
+
+  const getYoutubeEmbedUrl = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      if (urlObj.hostname.includes('youtube.com')) {
+        const videoId = urlObj.searchParams.get('v');
+        if (videoId) {
+          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+        }
+      }
+      if (urlObj.hostname.includes('youtu.be')) {
+        const videoId = urlObj.pathname.replace('/', '');
+        if (videoId) {
+          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+        }
+      }
+      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}>
+          {videos.slice(0, 1).map((item) => (
+            <div className="item-article-video d-flex w-50 gap-10" key={item.id}>
+              <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">
+          {videos.slice(1, 7).map((item) => (
+            <div className="item-article-video flex w-50 gap-2" key={item.id}>
+              <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>
+  );
+};