81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
import NoData from "@/components/EmptyStates/NoData";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { t } from "@/utils";
|
|
import { getBlogsApi } from "@/utils/api";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import { useEffect, useState } from "react";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const PopularPosts = ({ langCode }) => {
|
|
const [isPopularPostLoading, setIsPopularPostLoading] = useState(false);
|
|
const [popularBlogs, setPopulerBlogs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
getPopulerBlogsData();
|
|
}, [langCode]);
|
|
|
|
const getPopulerBlogsData = async () => {
|
|
setIsPopularPostLoading(true);
|
|
try {
|
|
const res = await getBlogsApi.getBlogs({ sort_by: "popular" });
|
|
setPopulerBlogs(res?.data?.data?.data);
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setIsPopularPostLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col border rounded-xl">
|
|
<div className="p-4 border-b">
|
|
<p className="font-medium">{t("popularPosts")}</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{isPopularPostLoading ? (
|
|
Array.from({ length: 8 })?.map((_, index) => (
|
|
<PopularPostsSkeleton key={index} />
|
|
))
|
|
) : popularBlogs && popularBlogs?.length > 0 ? (
|
|
popularBlogs?.map((popularBlog) => (
|
|
<CustomLink
|
|
key={popularBlog?.id}
|
|
href={`/blogs/${popularBlog?.slug}`}
|
|
className="flex gap-3 px-4 py-2 items-center"
|
|
>
|
|
<CustomImage
|
|
src={popularBlog?.image}
|
|
alt={popularBlog?.title}
|
|
height={48}
|
|
width={64}
|
|
className="aspect-[64/48] rounded object-cover"
|
|
/>
|
|
<p className="line-clamp-3 font-medium">
|
|
{popularBlog?.translated_title || popularBlog?.title}
|
|
</p>
|
|
</CustomLink>
|
|
))
|
|
) : (
|
|
<div className="col-span-full">
|
|
<NoData name={t("popularPosts")} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PopularPosts;
|
|
|
|
const PopularPostsSkeleton = () => {
|
|
return (
|
|
<div className="flex gap-3 px-4 py-2 items-center">
|
|
<Skeleton className="h-12 w-16 rounded-lg" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|