classify web

components/PagesComponent/Faq/FaqCard.jsx

@@ -0,0 +1,31 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const FaqCard = ({ faq }) => {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="border rounded-md overflow-hidden"
+    >
+      <AccordionItem value={faq?.id} className="border-none group">
+        <AccordionTrigger
+          className="text-start font-bold text-base px-4 hover:no-underline bg-transparent 
+                    group-data-[state=open]:bg-muted group-data-[state=open]:text-primary
+                    group-data-[state=open]:border-b"
+        >
+          {faq?.translated_question || faq?.question}
+        </AccordionTrigger>
+        <AccordionContent className="bg-muted p-4">
+          <p className="text-base">{faq?.translated_answer || faq?.answer}</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default FaqCard;

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;