72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
"use client";
|
||
|
||
import Footer from "@comp/Footer/page";
|
||
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
|
||
import Navbar from "@comp/Navbar/page";
|
||
import { useEffect, useState } from "react";
|
||
|
||
const FaqData = () => {
|
||
const [faq, setFaq] = useState([]);
|
||
const [faqSelect, setFaqSelect] = useState(0);
|
||
|
||
const fetchNavData = async (id) => {
|
||
const res = await fetch(`https://jsonplaceholder.typicode.com/comments`);
|
||
const post = await res.json();
|
||
setFaq(post);
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchNavData();
|
||
}, []);
|
||
return (
|
||
<>
|
||
<div className="bg-contact-us ">
|
||
<div className=" pb-20">
|
||
<NavbarTransparent />
|
||
|
||
<div className="my-[80px] ">
|
||
<div className="px-5">
|
||
<h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
|
||
پرسشهای متداول
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className=" xs:px-3 lg:px-20 rtl lg:m-10 xs:m-3 pb-20 ">
|
||
{faq?.map((e, index) => (
|
||
<div
|
||
className={` p-5 w-full rounded-lg my-2 tr03 cursor-pointer ${
|
||
faqSelect == index ? "bg-gray-100" : "bg-primary-100"
|
||
}`}
|
||
onClick={() => setFaqSelect(index)}
|
||
key={index}
|
||
>
|
||
<div className="flex">
|
||
<span className="mx-2 text-xl text-gray-900">
|
||
{faqSelect == index ? "-" : "+"}
|
||
</span>
|
||
<h2 className="mb-0 text-gray-700 text-sm text-right mt-1 font-semibold">
|
||
{e.name}
|
||
</h2>
|
||
</div>
|
||
{faqSelect == index && (
|
||
<>
|
||
<div className="h-[1px] bg-gray-300 w-[120px] mr-5 m-5 "></div>
|
||
<p className="mb-0 text-right text-gray-500 text-sm">
|
||
{e.body}
|
||
</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<Footer />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default FaqData;
|