classify web

components/PagesComponent/Faq/FaqsPage.jsx

@@ -0,0 +1,57 @@
+"use client";
+import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
+import { t } from "@/utils";
+import { useEffect, useState } from "react";
+import { getFaqApi } from "@/utils/api";
+import FaqCard from "./FaqCard";
+import Layout from "@/components/Layout/Layout";
+import { useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import PageLoader from "@/components/Common/PageLoader";
+import NoData from "@/components/EmptyStates/NoData";
+
+const FaqsPage = () => {
+  const [faqs, setFaqs] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+
+  useEffect(() => {
+    fetchFaqs();
+  }, [CurrentLanguage.id]);
+
+  const fetchFaqs = async () => {
+    try {
+      setLoading(true);
+      const res = await getFaqApi.getFaq();
+      setFaqs(res?.data?.data);
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Layout>
+      <BreadCrumb title2={t("faqs")} />
+      {loading ? (
+        <PageLoader />
+      ) : faqs && faqs?.length > 0 ? (
+        <div className="container">
+          <div className="flex flex-col gap-6 mt-8">
+            <h1 className="text-2xl font-semibold">{t("faqs")}</h1>
+            <div className="flex flex-col gap-4 md:gap-8">
+              {faqs?.map((faq) => {
+                return <FaqCard faq={faq} key={faq?.id} />;
+              })}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <NoData name={t("faqs")} />
+      )}
+    </Layout>
+  );
+};
+
+export default FaqsPage;