You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
SGPT/src/shared/components/home/QnASection.tsx

254 lines
8.2 KiB

import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import {
VscArrowDown,
VscChevronDown,
VscDebugBreakpointLog,
VscDiffAdded,
} from "react-icons/vsc";
import "../css/QnASection.css";
type Props = {};
const QnASection = (props: Props) => {
// const listQnA = [
// {
// id: 1,
// title: "What is Fight Out?",
// bgcolor: "bg-[#CC99FF]",
// contents: [
// {
// id: 1,
// content:
// "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// bgcolor: "bg-[#9999FF]",
// },
// {
// id: 2,
// content:
// "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// bgcolor: "bg-[#6699FF]",
// },
// {
// id: 3,
// content:
// "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// bgcolor: "bg-[#3399FF]",
// },
// {
// id: 4,
// content:
// "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// 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",
// },
// ],
// },
// {
// id: 3,
// 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",
// },
// ],
// },
// {
// id: 4,
// 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 { t } = useTranslation("qnaHome");
const [qnaData, setQnaData] = useState([]);
const showListItem = (id: string, iconDropDown: string) => {
const iconDropDownid = document.getElementById(`${iconDropDown}`);
// const ulhidden = document.querySelector(`#${id} ul`);
const ulhidden = document.querySelector(`#${id}>ul`);
console.log(ulhidden);
ulhidden?.classList.toggle("listItem__QnA-active");
// ulhidden?.classList.toggle("showListQnA");
// ulhidden?.classList.toggle("hiddenListQnA");
iconDropDownid?.classList.toggle("iconDropUp");
iconDropDownid?.classList.toggle("iconDropDown");
};
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setQnaData(t("data", { returnObjects: true }));
const section = document.querySelector("#qna");
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.2 }
);
if (!section) {
return;
}
observer.observe(section);
return () => {
observer.unobserve(section);
};
}, [t]);
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 animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center lg:flex mx-auto py-2 text-white "
id="qna"
>
<div className="w-full lg:w-[50%] min-h-[100px]">
<h1 className="text-4xl font-bold text-center hover:text-orange-400">
FAQS
</h1>
<h2 className="text-center ">
{t("navtitle")}
{/* Out here. Got a question that’s not on the list? Let us know
below! */}
</h2>
</div>
<animated.div
className="w-full lg:w-[50%] mx-auto overflow-hidden "
style={{
...styles,
}}
>
<ul className="flex flex-col items-center gap-4 w-[75%] mx-auto md:w-[85%] lg:w-full">
{qnaData.map((item: any, index: any) => {
return (
<li
id={"title" + item.id}
key={item.id}
className="w-full md:w-3/4 lg:w-full items-center flex flex-col pl-3 pr-3 h-full cursor-pointer border border-orange-500 rounded"
onClick={() =>
showListItem("title" + item.id, index + item.title)
}
>
<div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative ">
{/* <div
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
></div> */}
<span className="sm:text-xl md:text-2xl w-full pl-2 font-semibold borde text-white">
{item.title}
</span>
<div className="listQnA h-6 w-6 flex cursor-pointer ">
<VscChevronDown
id={index + item.title}
className="iconDropDown iconActive hover:text-2xl m-auto text-orange-500"
/>
</div>
</div>
<ul className="listItem__QnA flex-col w-full list-answer ">
{item.contents.map((list: any, index: any) => {
return (
<li
key={list.id}
className=" w-full min-h-10 flex items-center p-3 relative first:border-t first:border-orange-500 "
>
<span className="text-lg pl-2 font-bold text-white">
{list.content}
</span>
</li>
);
})}
</ul>
</li>
);
})}
</ul>
</animated.div>
</div>
);
};
export default QnASection;