faq , statistics , gallary parts connected to backend

components/pages/faq/answearQuestions.tsx

@@ -1,37 +1,53 @@
+"use client";
 import Link from "next/link";
-import FAQAccordion from "./faqAccardion";
-import { faqItems } from "@/lib/demoData";
+import FAQAccordion, { FAQItem } from "./faqAccardion";
 import { useTranslations } from "next-intl";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useEffect, useState } from "react";
 
 export function Togle() {
   const t = useTranslations();
-    const faqItems = [
-      {
-        id: "faq-1",
-        question: t("faq.question1.question"),
-        answer: t("faq.question1.answer"),
-      },
-      {
-        id: "faq-2",
-        question: t("faq.question2.question"),
-        answer: t("faq.question2.answer"),
-      },
-      {
-        id: "faq-3",
-        question: t("faq.question3.question"),
-        answer: t("faq.question3.answer"),
-      },
-      {
-        id: "faq-4",
-        question: t("faq.question4.question"),
-        answer: t("faq.question4.answer"),
-      },
-      {
-        id: "faq-5",
-        question: t("faq.question5.question"),
-        answer: t("faq.question5.answer"),
-      },
-    ];
+  const faqItems: FAQItem[] = [
+    {
+      id: 1,
+      question: t("faq.question1.question"),
+      answer: t("faq.question1.answer"),
+    },
+    {
+      id: 2,
+      question: t("faq.question2.question"),
+      answer: t("faq.question2.answer"),
+    },
+    {
+      id: 3,
+      question: t("faq.question3.question"),
+      answer: t("faq.question3.answer"),
+    },
+    {
+      id: 4,
+      question: t("faq.question4.question"),
+      answer: t("faq.question4.answer"),
+    },
+    {
+      id: 5,
+      question: t("faq.question5.question"),
+      answer: t("faq.question5.answer"),
+    },
+  ];
+  const [faq, setFaq] = useState<any>(faqItems);
+
+  const { data } = useQuery({
+    queryKey: ["faq"],
+    queryFn: () => httpClient(endPoints.faq),
+    select: (data) => data?.data?.results,
+  });
+
+  useEffect(() => {
+    data && setFaq(data);
+  }, [data]);
+
   return (
     <div className="min-h-screen bg-[#1e1d1c]">
       <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
@@ -48,7 +64,7 @@ export function Togle() {
 
           {/* FAQ Section */}
           <div className="max-w-250 w-full">
-            <FAQAccordion items={faqItems} />
+            <FAQAccordion items={faq} />
           </div>
         </div>
         {/* ASK QUESTION */}