85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Breadcrumb } from '@/components/Common/Breadcrumb';
|
|
import Skeleton from '@/components/Common/Skeleton';
|
|
|
|
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 ArticleHomeSkeleton = () => (
|
|
<section className="page-article pb-10">
|
|
<div className="container">
|
|
<Skeleton className="mb-4 h-5 w-48" />
|
|
<div className="tabs-category-article flex items-center gap-3">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-8 w-24" />
|
|
))}
|
|
</div>
|
|
<div className="box-article-home-top mt-4 grid grid-cols-3 gap-3">
|
|
<div className="col-span-2 flex gap-3">
|
|
<Skeleton className="aspect-video flex-1" />
|
|
<div className="flex flex-1 flex-col gap-3">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-20 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Skeleton className="h-10 w-full" />
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-10 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
const ArticleHome = () => {
|
|
const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];
|
|
const { data: categories, isLoading } = useApiData(
|
|
() => getArticleCategories(),
|
|
[],
|
|
{ initialData: [] as TypeArticleCategory[] },
|
|
);
|
|
|
|
if (isLoading) return <ArticleHomeSkeleton />;
|
|
|
|
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;
|