tabler/preview/pages/faq.astro

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

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

<DefaultLayout title="Frequently Asked Questions" pageMenu="extra.faq">
  <HeaderActionsBreadcrumb slot="page-header-actions" />
  <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">
                {category.questions.map((question, qi) => (
                  <div class="accordion-item">
                    <h3 class="accordion-header">
                      <button id={`faq-btn-${ci + 1}-${qi + 1}`} class={`accordion-button${qi === 0 ? '' : ' collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#faq-${ci + 1}-${qi + 1}`} aria-expanded={qi === 0 ? 'true' : 'false'} aria-controls={`faq-${ci + 1}-${qi + 1}`}>
                        {question.question}
                        <span class="accordion-button-toggle">
                          <Icon name="chevron-down" />
                        </span>
                      </button>
                    </h3>
                    <div id={`faq-${ci + 1}-${qi + 1}`} class={`accordion-collapse collapse${qi === 0 ? ' show' : ''}`} aria-labelledby={`faq-btn-${ci + 1}-${qi + 1}`} 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>