41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { ParagraphProps } from "components/paragraph"
|
|
import { Section } from "components/section"
|
|
import { SectionHeader } from "components/section-header"
|
|
import { FormattedText } from "./formatted-text"
|
|
|
|
export function ParagraphFAQ({ paragraph, ...props }: ParagraphProps) {
|
|
return (
|
|
<Section
|
|
data-cy="paragraph-faq"
|
|
backgroundColor={
|
|
paragraph.field_background_color === "muted" && "bg-gray-50"
|
|
}
|
|
{...props}
|
|
>
|
|
<SectionHeader
|
|
heading={paragraph.field_heading}
|
|
text={paragraph.field_text?.processed}
|
|
links={paragraph.field_links}
|
|
/>
|
|
<div className="container px-6 mx-auto">
|
|
{paragraph.field_items && (
|
|
<div className="grid gap-8 pt-10 md:py-20 md:gap-12 lg:gap-20 md:grid-cols-2">
|
|
{paragraph.field_items.map((card) => (
|
|
<div key={card.id}>
|
|
<h3 className="text-xl font-semibold md:text-2xl">
|
|
{card.field_heading}
|
|
</h3>
|
|
{card.field_text?.processed && (
|
|
<FormattedText
|
|
processed={card.field_text.processed}
|
|
className="mt-2 leading-relaxed"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|