49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Loader from "@/components/loaders/Loader";
|
|
import { useRecentBlogQuery } from "@/services/hooks/blog";
|
|
import { useEffect } from "react";
|
|
import CardBlog from "./CardBlog";
|
|
|
|
type ListOfRecentBlogProps = {
|
|
currentBlogId?: number;
|
|
};
|
|
|
|
export default function ListOfRecentBlog({ currentBlogId }: ListOfRecentBlogProps) {
|
|
const recentBlogQuery = useRecentBlogQuery();
|
|
|
|
useEffect(() => {
|
|
if (!!currentBlogId) {
|
|
recentBlogQuery._fetch({
|
|
currentBlogId,
|
|
});
|
|
}
|
|
}, [currentBlogId]);
|
|
|
|
if (recentBlogQuery.isFetching) {
|
|
return (
|
|
<div className="mt-5 w-full">
|
|
<Loader />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (recentBlogQuery.data.length <= 0) return <></>;
|
|
|
|
return (
|
|
<>
|
|
<div className="post-simple-group">
|
|
<div className="post-simple-group-title">
|
|
<h6>Recent Posts</h6>
|
|
</div>
|
|
<div className="post-simple-group-divider"></div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{recentBlogQuery.data.map((blog) => (
|
|
<CardBlog key={blog.slug} data={blog} colorPreset={2} isDescriptionVisible={false} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|