64 lines
2.0 KiB
TypeScript
64 lines
2.0 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"
|
|
|
|
export default function AccordionSection({ accordion, title }: AccordionProps) {
|
|
const initialPageSize = 5
|
|
const [pageSize, setPageSize] = useState(initialPageSize)
|
|
const showMoreVisible = accordion.length > initialPageSize
|
|
const showLessVisible = pageSize >= accordion.length
|
|
|
|
function handleShowMore() {
|
|
setPageSize(showLessVisible ? initialPageSize : accordion.length)
|
|
}
|
|
|
|
function getClassName(idx: number): string {
|
|
if (showMoreVisible && idx > pageSize - 1) {
|
|
return styles.hiddenItem
|
|
} else if (showMoreVisible && idx == pageSize - 1) {
|
|
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
|
|
key={`${acc.question}-${idx}`}
|
|
embeds={acc.answer.embedded_itemsConnection.edges}
|
|
nodes={acc.answer.json?.children[0].children}
|
|
/>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
|
|
{showMoreVisible ? (
|
|
<ShowMoreButton
|
|
loadMoreData={handleShowMore}
|
|
showLess={showLessVisible}
|
|
textShowMore="See all FAQ"
|
|
textShowLess="See less FAQ"
|
|
/>
|
|
) : null}
|
|
</SectionContainer>
|
|
)
|
|
}
|