classify web

components/PagesComponent/Blogs/PopularPosts.jsx

@@ -0,0 +1,80 @@
+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>
+  );
+};