preview/pages/faq.astro - dev - githubmirror/tabler

preview/pages/faq.astro
47 строк2 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
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>