58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Section } from '@/ui/Section';
|
|
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Accordion } from '@/components/shared/Accordion';
|
|
import { CardStack } from '@/ui/CardStack';
|
|
import { Center } from '@/ui/Center';
|
|
|
|
interface FAQItem {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
interface FAQSectionProps {
|
|
title: string;
|
|
subtitle: string;
|
|
faqs: FAQItem[];
|
|
}
|
|
|
|
/**
|
|
* FAQSection - A semantic component for the FAQ section.
|
|
*/
|
|
export function FAQSection({
|
|
title,
|
|
subtitle,
|
|
faqs,
|
|
}: FAQSectionProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Container size="md">
|
|
<Center>
|
|
<CardStack gap={4}>
|
|
<Center>
|
|
<Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="widest">
|
|
{subtitle}
|
|
</Text>
|
|
</Center>
|
|
<Heading level={2} weight="bold" align="center">
|
|
{title}
|
|
</Heading>
|
|
</CardStack>
|
|
</Center>
|
|
|
|
<CardStack gap={4}>
|
|
{faqs.map((faq, index) => (
|
|
<Accordion key={index} title={faq.question}>
|
|
<Text size="sm" variant="low" leading="relaxed">
|
|
{faq.answer}
|
|
</Text>
|
|
</Accordion>
|
|
))}
|
|
</CardStack>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|