80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"use client";
|
||
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
||
import { AnimatePresence, motion } from "framer-motion";
|
||
import React, { useState } from "react";
|
||
import { FAQData } from "./data/FAQData";
|
||
import AccordeonGroup from "../WebPage/PageComponents/Accordeon/AccordeonGroup";
|
||
import { useModalStore } from "@/stores/useModalStore";
|
||
|
||
export default function PrimeFAQ() {
|
||
const BASE_PATH = "/img/pages/prime/faq";
|
||
const FAQ_KEYS = Object.keys(FAQData);
|
||
|
||
const { setModal } = useModalStore();
|
||
const [image, setImage] = useState<string>(`${BASE_PATH}/faq_0.png`);
|
||
|
||
const handleChange = (openedTitle: string) => {
|
||
const index = FAQ_KEYS.indexOf(openedTitle);
|
||
if (index === -1) return;
|
||
setImage(`${BASE_PATH}/faq_${index}.png`);
|
||
};
|
||
|
||
return (
|
||
<div className="mt-[9.722vw]">
|
||
<h2 className="font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] max-md:text-[8.889vw] mb-[4.444vw]">
|
||
Ответы на популярные вопросы
|
||
</h2>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-[48.194vw] max-lg:w-full">
|
||
<AccordeonGroup
|
||
titles={FAQ_KEYS}
|
||
images={[
|
||
`${BASE_PATH}/faq_0.png`,
|
||
`${BASE_PATH}/faq_1.png`,
|
||
`${BASE_PATH}/faq_2.png`,
|
||
`${BASE_PATH}/faq_3.png`,
|
||
`${BASE_PATH}/faq_4.png`,
|
||
]}
|
||
content={FAQData}
|
||
openedByDefault={0}
|
||
onOpenedChange={handleChange}
|
||
className="!gap-[0.556vw] md:max-lg:!gap-[1.302vw] max-md:!gap-[2.222vw]"
|
||
isFaqPage
|
||
/>
|
||
<button
|
||
onClick={() => setModal(<QuestionFormModal />)}
|
||
className="w-full bg-gradient-saturated rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
||
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
||
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
||
>
|
||
Задать свой вопрос
|
||
</button>
|
||
</div>
|
||
|
||
<div className="w-[40.278vw] flex flex-col items-center justify-center mx-auto overflow-visible max-lg:hidden">
|
||
<AnimatePresence>
|
||
(
|
||
<motion.img
|
||
key={image}
|
||
initial={{
|
||
y: 200,
|
||
opacity: 0,
|
||
}}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{
|
||
duration: 0.5,
|
||
ease: "easeInOut",
|
||
}}
|
||
src={image}
|
||
alt=""
|
||
className=""
|
||
/>
|
||
)
|
||
</AnimatePresence>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|