classify web

2026-02-24 12:52:49 +05:00
commit 64af77101f
310 changed files with 45449 additions and 0 deletions
--- a/components/PagesComponent/LandingPage/OurBlogs.jsx
+++ b/components/PagesComponent/LandingPage/OurBlogs.jsx
@@ -0,0 +1,122 @@
+"use client";
+import { t } from "@/utils";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import { useEffect, useState } from "react";
+import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri";
+import { getBlogsApi } from "@/utils/api";
+import BlogCardSkeleton from "../../Skeletons/BlogCardSkeleton.jsx";
+import BlogCard from "./BlogCard.jsx";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice.js";
+import { useSelector } from "react-redux";
+
+const OurBlogs = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const isRTL = CurrentLanguage?.rtl;
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  const [Blogs, setBlogs] = useState([]);
+  const [IsLoading, setIsLoading] = useState(true);
+
+  const getBlogsData = async () => {
+    try {
+      const res = await getBlogsApi.getBlogs();
+      setBlogs(res?.data?.data?.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getBlogsData();
+  }, [CurrentLanguage.id]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <section className="py-28 bg-muted" id="ourBlogs">
+      <div className="container">
+        <div className="flex items-center flex-col gap-6">
+          <p className="outlinedSecHead">{t("ourBlog")}</p>
+          <h1 className="landingSecHeader">
+            {t("masteringMarketplace")}
+            <br />
+            {t("withOurBlog")}
+          </h1>
+        </div>
+        <Carousel
+          key={isRTL ? "rtl" : "ltr"}
+          className="w-full mt-20"
+          setApi={setApi}
+          opts={{ align: "start", direction: isRTL ? "rtl" : "ltr" }}
+        >
+          <CarouselContent className="-ml-3 md:-ml-[30px]">
+            {IsLoading
+              ? Array.from({ length: 6 }).map((_, i) => (
+                  <CarouselItem
+                    key={i}
+                    className="sm:basis-1/2 xl:basis-1/3 pl-3 md:pl-[30px]"
+                  >
+                    <BlogCardSkeleton />
+                  </CarouselItem>
+                ))
+              : Blogs &&
+                Blogs.length > 0 &&
+                Blogs.map((blog) => (
+                  <CarouselItem
+                    key={blog?.id}
+                    className="sm:basis-1/2 xl:basis-1/3 pl-3 md:pl-[30px]"
+                  >
+                    <BlogCard blog={blog} />
+                  </CarouselItem>
+                ))}
+          </CarouselContent>
+        </Carousel>
+
+        <div className="flex items-center justify-center mt-[30px] gap-4">
+          <button
+            onClick={() => api?.scrollTo(current - 1)}
+            className={`bg-primary p-2 rounded ${
+              !api?.canScrollPrev() ? "opacity-65 cursor-default" : ""
+            }`}
+            disabled={!api?.canScrollPrev()}
+          >
+            <RiArrowLeftLine
+              size={24}
+              color="white"
+              className={isRTL ? "rotate-180" : ""}
+            />
+          </button>
+          <button
+            onClick={() => api?.scrollTo(current + 1)}
+            className={`bg-primary p-2 rounded ${
+              !api?.canScrollNext() ? "opacity-65 cursor-default" : ""
+            }`}
+            disabled={!api?.canScrollNext()}
+          >
+            <RiArrowRightLine
+              size={24}
+              color="white"
+              className={isRTL ? "rotate-180" : ""}
+            />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OurBlogs;