add faq page

yoga-app/src/components/breadcrumbs.component.tsx

@@ -13,6 +13,7 @@ const pathToBreadCrumbs = (path: string) => {
         '/' : 'Kezdőlap',
         'about' : 'Rólam',
         'services' : 'Szolgáltatásaim',
+        'prices' : 'Áraim',
     }
     if ( mapping.hasOwnProperty(path)){
         return mapping[path];

yoga-app/src/components/faq.component.tsx

@@ -0,0 +1,74 @@
+"use client"
+import {YogaFaqComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-faq-component";
+import {useState} from "react";
+import FaqQaComponent from "@/components/faq.qa.component";
+import { MouseEvent } from 'react'
+
+
+export interface Props {
+    config: YogaFaqComponent_Plain
+}
+
+export default function FaqComponent({
+                                         config: {
+                                             title,
+                                             header,
+                                             description,
+                                             questionsAndAnswers
+                                         }
+                                     }: Props) {
+
+    const [selectedQAs, setSelectedQAs] = useState([] as number[]);
+
+    const onQAClick = (id: number) => {
+        if (selectedQAs.includes(id)) {
+            setSelectedQAs(prevState => {
+                return prevState.filter(value => value != id);
+            })
+        } else {
+            setSelectedQAs(prevState => {
+                return [...prevState, id]
+            })
+        }
+    }
+    return (
+        <section className="accordian-section">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                        <div className="accordian_content">
+                            <h5>{title}</h5>
+                            <h2>{header}</h2>
+                            <p>{description}</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="row" data-aos="fade-right">
+                    <div className="col-lg-1 col-md-1 col-sm-1 d-lg-block d-none"></div>
+                    <div className="col-lg-10 col-md-12 col-sm-12 col-xs-12">
+                        <div className="accordian-section-inner position-relative">
+                            <div className="accordian-inner">
+                                <div id="accordion1">
+                                    {
+                                        questionsAndAnswers.map((qa, index) => {
+                                            return (
+                                                <FaqQaComponent
+                                                qa={qa}
+                                                id={index}
+                                                onClick={onQAClick}
+                                                isOpen={selectedQAs.includes(index)  }
+                                                />
+                                            );
+                                        })
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-1 col-md-1 col-sm-1 d-lg-block d-none"></div>
+                </div>
+            </div>
+        </section>
+
+    )
+}

yoga-app/src/components/faq.qa.component.tsx

@@ -0,0 +1,50 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {YogaFaqQa_Plain} from "@/types/generated-strapi-interfaces/api/yoga-faq-qa";
+import clsx from "clsx";
+
+import classes from "./faq.qa.module.scss";
+import {useEffect, useState} from "react";
+
+export interface Props{
+    id:  number,
+    qa: YogaFaqQa_Plain,
+    isOpen: boolean,
+    onClick: (id: number) => void
+}
+export default function FaqQaComponent({id,qa,isOpen,onClick}: Props){
+
+
+
+    return (
+        <div className="accordion-card">
+            <div className="card-header" id={"heading" + id}>
+                <a href="#" onClick={ (event) => {
+                    event.preventDefault();
+                    onClick(id)
+                }} className={clsx("btn", "btn-link", {"collapsed": !isOpen})}
+                   data-toggle="collapse" data-target={"#collapse" + id}
+                   aria-expanded="false" aria-controls={"collapse" + id}>
+                    <h6>{qa.question}</h6>
+                </a>
+            </div>
+            <div id={"collapse" + id} className={clsx(
+                {
+                    "collapse": true,
+                    "show": isOpen,
+                }
+                )} aria-labelledby={"heading" + id}>
+                <div className="card-body">
+                    <div className="faq_wrapper">
+                        <figure className="mb-0">
+                            <YogaImageComponent
+                                src="./assets/images/faq_bar_line.png" alt=""
+                                className="img-fluid"/>
+                        </figure>
+                        <p className="text-left mb-0 p-0">{qa.answer}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    );
+}

yoga-app/src/components/faq.qa.module.scss

@@ -0,0 +1,4 @@
+
+.accordionBody{
+  //transition: all 1s;
+}