60 lines
1.8 KiB
TypeScript
60 lines
1.8 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 "../../ContentType/HotelPage/ShowMoreButton"
|
|
|
|
import styles from "./accordion.module.css"
|
|
|
|
import type { AccordionProps } from "@/types/components/blocks/Accordion"
|
|
|
|
export default function AccordionSection({ accordion, title }: AccordionProps) {
|
|
const [allItemsVisible, setAllItemsVisible] = useState(false)
|
|
function handleToggleShowMore() {
|
|
setAllItemsVisible((previousState) => !previousState)
|
|
}
|
|
|
|
function getClassName(idx: number): string {
|
|
if (!allItemsVisible && idx > 4) {
|
|
return styles.hiddenItem
|
|
} else if (!allItemsVisible && idx == 4) {
|
|
return styles.lastItem
|
|
}
|
|
return ""
|
|
}
|
|
|
|
return (
|
|
<SectionContainer id="faq">
|
|
{title && <SectionHeader textTransform="uppercase" title={title} />}
|
|
<Accordion theme={"light"} variant={"card"}>
|
|
{accordion.map((acc, idx: number) => (
|
|
<AccordionItem
|
|
key={acc.question + idx}
|
|
title={acc.question}
|
|
className={getClassName(idx)}
|
|
>
|
|
<JsonToHtml
|
|
embeds={acc.answer.embedded_itemsConnection.edges}
|
|
nodes={acc.answer.json?.children[0].children}
|
|
/>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
|
|
{accordion.length > 5 ? (
|
|
<ShowMoreButton
|
|
textShowMore="See all FAQ"
|
|
textShowLess="See less FAQ"
|
|
allItemsVisible={allItemsVisible}
|
|
handleToggleShowMore={handleToggleShowMore}
|
|
/>
|
|
) : null}
|
|
</SectionContainer>
|
|
)
|
|
}
|