classify web

components/PagesComponent/LandingPage/QuickAnswers.jsx

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { getFaqApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+const QuickAnswers = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [Faqs, setFaqs] = useState([]);
+
+  const getFaqData = async () => {
+    try {
+      const res = await getFaqApi.getFaq();
+      setFaqs(res?.data?.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getFaqData();
+  }, [CurrentLanguage.id]);
+
+  return (
+    <section className="py-28" id="faq">
+      <div className="container">
+        <div className="flex items-center flex-col gap-6">
+          <p className="outlinedSecHead">{t("navigating")}</p>
+          <h1 className="landingSecHeader">{t("quickAnswers")}</h1>
+        </div>
+        <div className="flex flex-col gap-4 md:gap-8 mt-20">
+          {Faqs &&
+            Faqs.length > 0 &&
+            Faqs.map((faq) => (
+              <Accordion
+                type="single"
+                collapsible
+                className="border rounded-md overflow-hidden"
+                key={faq?.id}
+              >
+                <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>
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuickAnswers;