classify web

components/PagesComponent/AdsListing/ComponentOne.jsx

@@ -0,0 +1,81 @@
+"use client";
+import { MdChevronRight } from "react-icons/md";
+import { Button } from "@/components/ui/button";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+
+const ComponentOne = ({
+  categories,
+  categoriesLoading,
+  fetchMoreCategory,
+  lastPage,
+  currentPage,
+  isLoadMoreCat,
+  handleCategoryTabClick,
+}) => {
+  return (
+    <>
+      <div className=" grid grid-cols-1 md:grid-cols-3 gap-6">
+        {categoriesLoading ? (
+          <div className="col-span-12 py-28">
+            <Loader />
+          </div>
+        ) : (
+          categories?.map((category) => {
+            return (
+              <div className="" key={category?.id}>
+                <div
+                  className="flex justify-between items-center cursor-pointer"
+                  key={category?.id}
+                  onClick={() => handleCategoryTabClick(category)}
+                >
+                  <div className="flex items-center gap-2 ">
+                    <CustomImage
+                      src={category?.image}
+                      alt={category?.translated_name || category?.name}
+                      height={48}
+                      width={48}
+                      className="h-12 w-12 rounded-full"
+                    />
+                    <span className="break-all">
+                      {category?.translated_name || category?.name}
+                    </span>
+                  </div>
+                  {category?.subcategories?.length > 0 && (
+                    <MdChevronRight size={24} className="rtl:scale-x-[-1]" />
+                  )}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {lastPage > currentPage && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isLoadMoreCat || categoriesLoading}
+            onClick={fetchMoreCategory}
+          >
+            {isLoadMoreCat ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ComponentOne;
+
+const Loader = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="relative w-12 h-12">
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
+        <div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
+      </div>
+    </div>
+  );
+};