tabler/preview/pages/faq.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/ui/Icon.astro';
import faq from '@data/faq.json';

const categories = faq as { name: string; questions: { question: string }[] }[];
---

<DefaultLayout pageHeader="Frequently Asked Questions" actions="breadcrumb" pageMenu="extra.faq">
	<div class="card card-lg">
		<div class="card-body">
			<div class="space-y-4">
				{
					categories.map((category, ci) => (
						<div>
							<h2 class="mb-3">
								{ci + 1}. {category.name}
							</h2>
							<div
								id={`faq-${ci + 1}`}
								class="accordion accordion-tabs"
								role="tablist"
								aria-multiselectable="true"
							>
								{category.questions.map((question, qi) => (
									<div class="accordion-item">
										<div class="accordion-header">
											<button
												class={`accordion-button${qi === 0 ? '' : ' collapsed'}`}
												data-bs-toggle="collapse"
												data-bs-target={`#faq-${ci + 1}-${qi + 1}`}
												role="tab"
											>
												{question.question}
												<div class="accordion-button-toggle">
													<Icon name="chevron-down" />
												</div>
											</button>
										</div>
										<div
											id={`faq-${ci + 1}-${qi + 1}`}
											class={`accordion-collapse collapse${qi === 0 ? ' show' : ''}`}
											role="tabpanel"
											data-bs-parent={`#faq-${ci + 1}`}
										>
											<div class="accordion-body pt-0">
												<div>
													<p>
														Lorem ipsum dolor sit amet, consectetur adipisicing elit.
														Accusantium alias dignissimos dolorum ea est eveniet, excepturi
														illum in iste iure maiores nemo recusandae rerum saepe sed, sunt
														totam! Explicabo, ipsa?
													</p>
													<p>
														Lorem ipsum dolor sit amet, consectetur adipisicing elit.
														Accusantium alias dignissimos dolorum ea est eveniet, excepturi
														illum in iste iure maiores nemo recusandae rerum saepe sed, sunt
														totam! Explicabo, ipsa?
													</p>
												</div>
											</div>
										</div>
									</div>
								))}
							</div>
						</div>
					))
				}
			</div>
		</div>
	</div>
</DefaultLayout>