adilallo
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import LayoutAccordion from "../../layout/Accordion";
|
|
import type { FaqAccordionViewProps } from "./Accordion.types";
|
|
|
|
/**
|
|
* Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380). **xl** rows **Large** via `xlSize` (22135:890328).
|
|
* Section title: Large Heading (32px, lh 40) below `lg`; X Large Heading (36px, lh 44) at `lg`; XX Large Heading (40px, lh 52) at `xl` (Figma desktop frame 22135:890398).
|
|
*/
|
|
function FaqAccordionView({
|
|
title,
|
|
items,
|
|
size,
|
|
lgSize,
|
|
xlSize,
|
|
headingId,
|
|
className = "",
|
|
}: FaqAccordionViewProps) {
|
|
return (
|
|
<section
|
|
aria-labelledby={headingId}
|
|
className={`bg-[#141414] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-160)] md:py-[var(--spacing-scale-096)] ${className}`.trim()}
|
|
>
|
|
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
|
|
<h2
|
|
id={headingId}
|
|
className="w-full px-[var(--spacing-scale-016)] text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] md:px-0 lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
|
|
>
|
|
{title}
|
|
</h2>
|
|
<div className="w-full md:px-0">
|
|
{items.map((item, index) => (
|
|
<LayoutAccordion
|
|
key={`${item.title}-${index}`}
|
|
title={item.title}
|
|
subhead={item.subhead}
|
|
size={size}
|
|
lgSize={lgSize}
|
|
xlSize={xlSize}
|
|
>
|
|
{item.answer}
|
|
</LayoutAccordion>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
FaqAccordionView.displayName = "FaqAccordionView";
|
|
|
|
export default memo(FaqAccordionView);
|