59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
import JsonToHtml from "@/components/JsonToHtml"
|
|
import SectionContainer from "@/components/Section/Container"
|
|
import SectionHeader from "@/components/Section/Header"
|
|
import Accordion from "@/components/TempDesignSystem/Accordion"
|
|
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
|
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
|
|
|
|
import styles from "./accordion.module.css"
|
|
|
|
import type { AccordionProps } from "@/types/components/blocks/Accordion"
|
|
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
|
|
import type { RTENode } from "@/types/transitionTypes/rte/node"
|
|
|
|
export default function AccordionSection({ accordion, title }: AccordionProps) {
|
|
const showToggleButton = accordion.length > 5
|
|
const [allAccordionsVisible, setAllAccordionsVisible] =
|
|
useState(!showToggleButton)
|
|
|
|
function toggleAccordions() {
|
|
setAllAccordionsVisible((state) => !state)
|
|
}
|
|
|
|
return (
|
|
<SectionContainer id={HotelHashValues.faq}>
|
|
<SectionHeader textTransform="uppercase" title={title} />
|
|
<Accordion
|
|
className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
|
|
theme="light"
|
|
variant="card"
|
|
>
|
|
{accordion.map((acc) => (
|
|
<AccordionItem key={acc.question} title={acc.question}>
|
|
{acc.answer.json.children.map(
|
|
(child: { children: RTENode[] }, idx: number) => (
|
|
<JsonToHtml
|
|
key={acc.question + idx}
|
|
embeds={acc.answer.embedded_itemsConnection.edges}
|
|
nodes={child.children}
|
|
/>
|
|
)
|
|
)}
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
|
|
{showToggleButton ? (
|
|
<ShowMoreButton
|
|
loadMoreData={toggleAccordions}
|
|
showLess={allAccordionsVisible}
|
|
/>
|
|
) : null}
|
|
</SectionContainer>
|
|
)
|
|
}
|