71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
"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;
|