52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'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';
|
|
import Skeleton from '@/components/Common/Skeleton';
|
|
|
|
const BoxArticleVideo: React.FC = () => {
|
|
const { data: videos, isLoading } = 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">
|
|
{isLoading
|
|
? Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="flex flex-1 flex-col gap-2">
|
|
<Skeleton className="aspect-video w-full" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-3 w-3/4" />
|
|
</div>
|
|
))
|
|
: videos.slice(0, 4).map((item) => (
|
|
<ItemArticleVideo item={item} key={item.id} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BoxArticleVideo;
|