54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
import Accordion from "@scandic-hotels/design-system/Accordion"
|
|
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
|
|
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
|
|
|
|
import { Section } from "@/components/Section"
|
|
import SectionHeader from "@/components/Section/Header/Deprecated"
|
|
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
|
|
|
|
import styles from "./accordion.module.css"
|
|
|
|
import type { AccordionProps } from "@/types/components/blocks/Accordion"
|
|
import { HotelHashValues } from "@/types/enums/hotelPage"
|
|
|
|
export default function AccordionSection({ accordion, title }: AccordionProps) {
|
|
const showToggleButton = accordion.length > 5
|
|
const [allAccordionsVisible, setAllAccordionsVisible] =
|
|
useState(!showToggleButton)
|
|
|
|
function toggleAccordions() {
|
|
setAllAccordionsVisible((state) => !state)
|
|
}
|
|
|
|
return (
|
|
<Section className={styles.accordionSection} id={HotelHashValues.faq}>
|
|
<SectionHeader textTransform="uppercase" title={title} />
|
|
<Accordion
|
|
className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
|
|
>
|
|
{accordion.map((acc) =>
|
|
acc ? (
|
|
<AccordionItem key={acc.question} title={acc.question}>
|
|
<JsonToHtml
|
|
embeds={acc.answer.embedded_itemsConnection.edges}
|
|
nodes={acc.answer.json.children}
|
|
/>
|
|
</AccordionItem>
|
|
) : null
|
|
)}
|
|
</Accordion>
|
|
|
|
{showToggleButton ? (
|
|
<ShowMoreButton
|
|
loadMoreData={toggleAccordions}
|
|
showLess={allAccordionsVisible}
|
|
/>
|
|
) : null}
|
|
</Section>
|
|
)
|
|
}
|