OwlCyberSecurity - MANAGER

Edit File: FAQSection.tsx

"use client";
import React, { useState } from "react";
import ShowMoreFaq from "./ShowMoreFaq";
import { FAQData } from "@/components/FAQData";

function FAQSection() {
  const [tabName, setTabName] = useState("tabNumber1");
  // console.log(FAQData[0]);
  return (
    <section className="faq-section">
      <h3>
        سوالات{" "}
        <span className="text-[var(--base-yellow)] font-IRANSansBold">
          متداول
        </span>{" "}
        شما
      </h3>
      <div className="faq-options">
        <p
          className={tabName === "tabNumber1" ? "tab1 active" : ""}
          onClick={() => setTabName("tabNumber1")}
        >
          ورود | ثبت نام
        </p>
        <p
          className={tabName === "tabNumber2" ? "tab2 active" : ""}
          onClick={() => setTabName("tabNumber2")}
        >
          روند ثبت سفارش
        </p>
        <p
          className={tabName === "tabNumber3" ? "tab3 active" : ""}
          onClick={() => setTabName("tabNumber3")}
        >
          باز گرداندن کالا
        </p>
        <p
          className={tabName === "tabNumber4" ? "tab4 active" : ""}
          onClick={() => setTabName("tabNumber4")}
        >
          سایر موارد
        </p>
        <span className="glider"></span>
      </div>
      <div
        className={
          tabName === "tabNumber1" ? "faq-content-container" : "hidden"
        }
      >
        {FAQData[0].tabNumber1.map((item: any, index: number) => (
          <ShowMoreFaq
            key={item.id}
            title={item.title}
            number={`0${index + 1}`}
            desc={item.desc}
          />
        ))}
      </div>
      <div
        className={
          tabName === "tabNumber2" ? "faq-content-container" : "hidden"
        }
      >
        {FAQData[0].tabNumber2.map((item: any, index: number) => (
          <ShowMoreFaq
            key={item.id}
            title={item.title}
            number={`0${index + 1}`}
            desc={item.desc}
          />
        ))}
      </div>
      <div
        className={
          tabName === "tabNumber3" ? "faq-content-container" : "hidden"
        }
      >
        {FAQData[0].tabNumber3.map((item: any, index: number) => (
          <ShowMoreFaq
            key={item.id}
            title={item.title}
            number={`0${index + 1}`}
            desc={item.desc}
          />
        ))}
      </div>
      <div
        className={
          tabName === "tabNumber4" ? "faq-content-container" : "hidden"
        }
      >
        {FAQData[0].tabNumber4.map((item: any, index: number) => (
          <ShowMoreFaq
            key={item.id}
            title={item.title}
            number={`0${index + 1}`}
            desc={item.desc}
          />
        ))}
      </div>
    </section>
  );
}

export default FAQSection;