61 lines
1.4 KiB
Plaintext
61 lines
1.4 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon';
|
|
|
|
interface Item {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
export interface Props {
|
|
title?: string;
|
|
subtitle?: string;
|
|
items: Array<Array<Item>>;
|
|
}
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
items = [],
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
|
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
|
<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
|
|
{
|
|
title && (
|
|
<h2
|
|
class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
|
|
set:html={title}
|
|
/>
|
|
)
|
|
}
|
|
{
|
|
subtitle && (
|
|
<p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="max-w-screen-xl sm:mx-auto">
|
|
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
|
{
|
|
items &&
|
|
items.map((subitems) => (
|
|
<div class="space-y-8">
|
|
{subitems.map(({ question, answer }) => (
|
|
<div>
|
|
<h3 class="mb-4 text-xl font-bold">
|
|
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
|
|
{question}
|
|
</h3>
|
|
{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer}></div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|