62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
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"
|
|
|
|
export default function AccordionSection({ accordion, title }: AccordionProps) {
|
|
const intl = useIntl()
|
|
|
|
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}>
|
|
<JsonToHtml
|
|
embeds={acc.answer.embedded_itemsConnection.edges}
|
|
nodes={acc.answer.json?.children[0].children}
|
|
/>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
|
|
{showToggleButton ? (
|
|
<ShowMoreButton
|
|
loadMoreData={toggleAccordions}
|
|
showLess={allAccordionsVisible}
|
|
textShowMore={intl.formatMessage({
|
|
id: "See all FAQ",
|
|
})}
|
|
textShowLess={intl.formatMessage({
|
|
id: "See less FAQ",
|
|
})}
|
|
/>
|
|
) : null}
|
|
</SectionContainer>
|
|
)
|
|
}
|