53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
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>
|
|
|
|
);
|
|
}
|