FaqItem.jsx

import React, {useEffect, useRef, useState} from 'react';
import Link from '@docusaurus/Link'

export default function FaqItem({
                                    children,
                                    tag = 'li',
                                    title,
                                    active
                                  }) {
  const [accordionOpen, setAccordionOpen] = useState(false);
  const accordion = useRef(null);
  const Component = tag;

  useEffect(() => {
    setAccordionOpen(active)
  }, [accordion])

  return (
    <Component className={'list-none border-t border-gray-300'}>
      <button
        className="flex items-center w-full text-lg font-medium text-left py-5 cursor-pointer"
        onClick={(e) => {
          e.preventDefault();
          setAccordionOpen(!accordionOpen);
        }}
        aria-expanded={accordionOpen}
      >
        <svg className="w-4 h-4 fill-current text-yellow-500 flex-shrink-0 mr-8 -ml-12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <rect y="7" width="16" height="2" rx="1" className={`transform origin-center transition duration-200 ease-out ${accordionOpen && 'rotate-180'}`} />
          <rect y="7" width="16" height="2" rx="1" className={`transform origin-center rotate-90 transition duration-200 ease-out ${accordionOpen && 'rotate-180'}`} />
        </svg>
        <span>{title}</span>
      </button>
      <div
        ref={accordion}
        className="text-gray-600 overflow-hidden transition-all duration-300 ease-in-out"
        style={accordionOpen ? {maxHeight: accordion.current.scrollHeight, opacity: 1} : {maxHeight: 0, opacity: 0}}
      >
        <div className="pb-5 text-gray-800">{children}</div>
      </div>
    </Component>
  );
}