mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
48 lines
2.2 KiB
Plaintext
48 lines
2.2 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import faq from '@data/faq.json'
|
|
|
|
const categories = faq as { name: string; questions: { question: string }[] }[]
|
|
---
|
|
|
|
<DefaultLayout title="Frequently Asked Questions" 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>
|