Microdata enabled FAQs

FAQItem.tsx

import React, { useState } from "react";
import { HiChevronDown } from "react-icons/hi";

export default function FAQItem({ item, isOpen }: any) {
  const [open, setOpen] = useState(isOpen);

  return (
    <div
      itemScope
      itemProp="mainEntity"
      itemType="https://schema.org/Question"
      className="pb-4 border-b"
    >
      <div
        onClick={() => setOpen((i: any) => !i)}
        className="flex items-center justify-between cursor-pointer"
      >
        <h3 className="pr-5 text-lg text-[#111111]" itemProp="name">
          {item?.question}
        </h3>
        <HiChevronDown
          className={`block text-xl transition-all duration-300 ${
            open ? "rotate-180 transform" : ""
          }`}
        />
      </div>
      <div
        itemScope
        itemProp="acceptedAnswer"
        itemType="https://schema.org/Answer"
        initial={false}
      >
        <div itemProp="text">
          {item?.answer?.map((i: any) => (
            <p
              key={i}
              dangerouslySetInnerHTML={{ __html: i }}
              className="pt-4 text-base text-[#444]"
            ></p>
          ))}
        </div>
      </div>
    </div>
  );
}

faqs.config.ts

interface IFAQ {
  id: number;
  question: string;
  answer: string[];
}

export const faqs: IFAQ[] = [
  {
    id: 1,
    question: "",
    answer: [
    ],
  },
];

faqs.tsx

import React from "react";
import FAQItem from "src/faq/FAQItem";
import { faq } from "src/faq/faq.config";

export default function AllFAQs() {
  return (
    <>
      <div className="bg-[#042013] text-white">
        <div className="c-container space-y-8 py-20">
          <img src="/assets/faqs.svg" className="mx-auto max-w-xs" />
          <h1 className="text-center text-3xl font-bold md:text-4xl">
            Frequently Asked Questions
          </h1>
        </div>
      </div>
      <div
        className="c-container-sm space-y-16 py-16 pb-28"
        itemScope
        itemType="https://schema.org/FAQPage"
      >
        <div className="space-y-5">
          {faq.homepage?.map((i: any, j: any) => (
            <FAQItem key={j} item={i} isOpen={i === faq.homepage[0]} />
          ))}
        </div>
      </div>
    </>
  );
}