update

src/features/Article/HomeArticlePage/index.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Breadcrumb } from '@components/Common/Breadcrumb';
+
+import { ArticleTopLeft } from '../ArticleTopLeft';
+import { ArticleTopRight } from '../ArticleTopRight';
+import { BoxVideoArticle } from './BoxVideoArticle';
+import { BoxArticleMid } from './BoxArticleMid';
+import { BoxArticleReview } from './BoxArticleReview';
+import { getArticleCategories } from '@/lib/api/article';
+import { useApiData } from '@/hooks/useApiData';
+import type { TypeArticleCategory } from '@/types/article/ListCategoryArticle';
+
+const ArticleHome = () => {
+  const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];
+  const { data: categories } = useApiData(
+    () => getArticleCategories(),
+    [],
+    { initialData: [] as TypeArticleCategory[] },
+  );
+
+  return (
+    <section className="page-article pb-10">
+      <div className="container">
+        <Breadcrumb items={breadcrumbItems} />
+
+        <div className="tabs-category-article flex items-center">
+          {categories.map((item, index) => (
+            <Link href={item.url} key={`${item.id}-${index}`} className="item-tab-article">
+              <h2 className="title-cate-article font-[400]">{item.title}</h2>
+            </Link>
+          ))}
+        </div>
+
+        <div className="box-article-home-top grid grid-cols-3 gap-3">
+          <div className="col-left-article border-box-article box-new-article boder-radius-10 col-span-2">
+            <ArticleTopLeft />
+          </div>
+          <ArticleTopRight />
+        </div>
+
+        <BoxVideoArticle />
+        <BoxArticleMid />
+        <BoxArticleReview />
+      </div>
+    </section>
+  );
+};
+
+export default ArticleHome;