update

src/features/Home/BoxArticle/index.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { FaCaretRight } from 'react-icons/fa';
+import Link from 'next/link';
+import ItemArticle from './ItemArticle';
+import { getArticles } from '@/lib/api/article';
+import { useApiData } from '@/hooks/useApiData';
+import type { Article } from '@/types';
+
+const BoxArticle: React.FC = () => {
+  const { data: articles } = useApiData(
+    () => getArticles(),
+    [],
+    { initialData: [] as Article[] },
+  );
+
+  return (
+    <div className="box-article-group boder-radius-10">
+      <div className="flex items-center justify-between">
+        <div className="title-box">
+          <h2 className="title-box font-[600]">Tin tức công nghệ</h2>
+        </div>
+        <Link href="/tin-cong-nghe" className="btn-article-group flex items-center gap-1">
+          <span>Xem tất cả</span>
+          <FaCaretRight size={16} />
+        </Link>
+      </div>
+      <div className="list-article-group flex items-center gap-10">
+        {articles.slice(0, 4).map((item) => (
+          <ItemArticle item={item} key={item.id} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BoxArticle;