update

src/features/Home/ArticleVideo/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { FaCaretRight } from 'react-icons/fa';
+import Link from 'next/link';
+import ItemArticleVideo from './ItemArticleVideo';
+import { getArticleVideos } from '@/lib/api/article';
+import { useApiData } from '@/hooks/useApiData';
+import type { Article } from '@/types';
+
+const BoxArticleVideo: React.FC = () => {
+  const { data: videos } = useApiData(
+    () => getArticleVideos(),
+    [],
+    { initialData: [] as Article[] },
+  );
+
+  return (
+    <div className="box-videos-group box-article-group boder-radius-10 relative">
+      <div className="flex items-center justify-between">
+        <div className="title-box">
+          <h2 className="title-box font-[600]">Youtube Channel</h2>
+        </div>
+        <Link
+          href="https://www.youtube.com/NguyenCongPC"
+          target="_blank"
+          rel="nofollow"
+          className="btn-article-group flex items-center gap-2"
+        >
+          <span>Xem tất cả</span>
+          <FaCaretRight size={16} />
+        </Link>
+      </div>
+      <div className="list-videos-group list-article-group flex items-center gap-10">
+        {videos.slice(0, 4).map((item) => (
+          <ItemArticleVideo item={item} key={item.id} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BoxArticleVideo;