SGPT/src/shared/components/home/QnASection.tsx

import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import {
  VscArrowDown,
  VscChevronDown,
  VscDebugBreakpointLog,
  VscDiffAdded,
} from "react-icons/vsc";
import "../animated/QnASection.css";
type Props = {};

const QnASection = (props: Props) => {
  const listQnA = [
    {
      id: 1,
      title: "Abc",
      bgcolor: "bg-[#CC99FF]",
      contents: [
        {
          id: 1,
          content: "12sdfsd3",
          bgcolor: "bg-[#9999FF]",
        },
        {
          id: 2,
          content: "123ádsa",
          bgcolor: "bg-[#6699FF]",
        },
        {
          id: 3,
          content: "123ádas",
          bgcolor: "bg-[#3399FF]",
        },
        {
          id: 4,
          content: "123ádasd",
          bgcolor: "bg-[#0099FF]",
        },
      ],
    },
    {
      id: 2,
      title: "Abcd",
      bgcolor: "bg-[#CC66FF]",

      contents: [
        {
          id: 1,
          bgcolor: "bg-[#9966FF]",
          content: "ádasffjk12",
        },
        {
          id: 2,
          bgcolor: "bg-[#6666FF]",
          content: "ádasffj1k",
        },
        {
          id: 3,
          bgcolor: "bg-[#3366FF]",
          content: "ádasffj12k",
        },
        {
          id: 4,
          bgcolor: "bg-[#0066FF]",
          content: "ádasffj123k",
        },
      ],
    },
  ];
  const showListItem = (id: string) => {
    const element = document.getElementById(`${id}`);
    // const ulhidden = document.querySelector(`#${id} ul`);
    const ulhidden = document.querySelector(`#${id}>ul`);
    console.log(ulhidden);
    ulhidden?.classList.toggle("hidden");
    ulhidden?.classList.toggle("flex");
  };
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const section = document.querySelector("#qna");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.5 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, []);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    from: {
      opacity: 0,
    },
    to: {
      opacity: isVisible ? 1 : 0,
    },

    config: {
      duration: 1000,
    },
  });

  return (
    <div
      className="container min-h-[400px] mb-[100px] flex flex-wrap lg:justify-between justify-center items-start mx-auto py-2 text-white "
      id="qna"
    >
      <div className="w-full lg:w-[50%]">
        <h1 className="text-4xl font-bold text-center hover:text-orange-400">
          FAQS
        </h1>
        <h2 className="text-center ">
          See some of the most frequently asked questions about Fight
          {/* Out here. Got a question that’s not on the list? Let us know
                    below! */}
        </h2>
      </div>

      <animated.div
        className="w-1/2 flex justify-end overflow-hidden"
        style={{
          ...styles,
        }}
      >
        <ul className="flex flex-col items-center gap-4 lg:w-3/4 w-full ">
          {listQnA.map((item, index) => {
            return (
              <li
                id={item.title}
                key={item.id}
                className="w-full items-center flex flex-col pl-3 pr-3 "
              >
                <div className="w-full h-[52px] flex justify-between items-center bg-slate-200  pl-3 pr-3 z-10 relative  ">
                  <div
                    className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
                  ></div>
                  <span className="text-xl font-bold text-gray-700">
                    {item.title}
                  </span>
                  <div
                    className="listQnA h-6 w-6 flex cursor-pointer "
                    onClick={() => showListItem(item.title)}
                  >
                    <VscChevronDown className="hover:text-2xl m-auto text-gray-700" />
                  </div>
                </div>
                <ul className="hidden ul-hidden flex-col gap-y-0.5 pt-1 pl-0.5 w-full list-answer animate-[listShowdown_0.75s_ease] animate-[listHidden_0.75s_ease]">
                  {item.contents.map((list, index) => {
                    return (
                      <li
                        key={list.id}
                        className=" w-full h-10 flex items-center border-t-2 border-gray-400 pl-3 pr-3 bg-slate-200 relative"
                      >
                        <div
                          className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`}
                        ></div>
                        <span className="text-lg font-bold text-gray-700">
                          {list.content}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </li>
            );
          })}
        </ul>
      </animated.div>
    </div>
  );
};

export default QnASection;