classify web

2026-02-24 12:52:49 +05:00
commit 64af77101f
310 changed files with 45449 additions and 0 deletions
--- a/components/PagesComponent/Blogs/Blogs.jsx
+++ b/components/PagesComponent/Blogs/Blogs.jsx
@@ -0,0 +1,103 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+import { getBlogsApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import BlogCardSkeleton from "@/components/Skeletons/BlogCardSkeleton";
+import BlogCard from "../LandingPage/BlogCard";
+import Layout from "@/components/Layout/Layout";
+import { Button } from "@/components/ui/button";
+import NoData from "@/components/EmptyStates/NoData";
+import Tags from "./Tags";
+import { useSearchParams } from "next/navigation";
+import { useSelector } from "react-redux";
+import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
+
+const Blogs = () => {
+  const searchParams = useSearchParams();
+  const tag = searchParams?.get("tag");
+  const langCode = useSelector(getCurrentLangCode);
+  const [blogs, setBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoadMore, setIsLoadMore] = useState(false);
+  useEffect(() => {
+    getBlogsData(currentPage);
+  }, [tag, langCode]);
+
+  const getBlogsData = async (page) => {
+    try {
+      page > 1 ? setIsLoadMore(true) : setIsLoading(true);
+      const res = await getBlogsApi.getBlogs({
+        sort_by: "new-to-old",
+        page,
+        ...(tag && { tag }),
+      });
+
+      if (res?.data?.error === false) {
+        page === 1
+          ? setBlogs(res?.data?.data?.data)
+          : setBlogs([...blogs, ...res?.data?.data?.data]);
+        setCurrentPage(res?.data?.data?.current_page);
+        setHasMore(res?.data?.data?.current_page < res?.data?.data?.last_page);
+      } else {
+        console.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  const handleLoadMore = () => {
+    getBlogsData(currentPage + 1);
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("ourBlogs")} />
+      <div className="container">
+        <div className="flex flex-col mt-8 gap-6">
+          <h1 className="text-2xl font-medium">{t("ourBlogs")}</h1>
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-4 ">
+            <div className="lg:col-span-8 col-span-12 order-2 lg:order-1">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {isLoading ? (
+                  Array.from({ length: 6 })?.map((_, index) => (
+                    <BlogCardSkeleton key={index} />
+                  ))
+                ) : blogs && blogs?.length > 0 ? (
+                  blogs?.map((blog) => <BlogCard key={blog?.id} blog={blog} />)
+                ) : (
+                  <div className="col-span-full">
+                    <NoData name={t("blog")} />
+                  </div>
+                )}
+              </div>
+              {hasMore && (
+                <div className="text-center mt-6 mb-2">
+                  <Button
+                    variant="outline"
+                    className="text-sm sm:text-base text-primary w-[256px]"
+                    disabled={isLoading || isLoadMore}
+                    onClick={handleLoadMore}
+                  >
+                    {isLoadMore ? t("loading") : t("loadMore")}
+                  </Button>
+                </div>
+              )}
+            </div>
+            <div className="col-span-12 lg:col-span-4 order-1 lg:order-2">
+              <Tags tag={tag} langCode={langCode} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Blogs;