FAQ Section

JetShip offers a dynamic and fully customizable FAQ Section, designed to display frequently asked questions in a clear, organized, and interactive manner. The section leverages an accordion-style layout, which can be customized in three different variants, giving you flexibility in how the FAQs are presented to your users. Whether you want a simple collapsible accordion, a split-styled accordion, or an outlined accordion, JetShip makes it easy to tailor the FAQ experience to your needs.

The FAQ section can dynamically fetch data from your database, or you can pass static data that matches the required structure.

---

1. FAQ Section

🗂 Accordion Variants:

• Accordion Collapsible: Control whether the accordion expands and collapses or stays open based on user interaction.
• Accordion Type:
  • Single: Only one FAQ can be expanded at a time.
  • Multiple: Multiple FAQs can be expanded simultaneously.
• Accordion Variant:
  • Split: A split accordion layout where questions and answers are displayed on opposite sides for a more dynamic presentation.
  • Outline: A cleaner, outlined accordion style that places emphasis on the borders.
  • Default: The default accordion style with a simple expand/collapse interaction.

Each FAQ section is powered by the FAQType database structure, ensuring that your FAQs are always up-to-date. You can easily fetch the FAQ data from your database or pass static data that matches the schema.

⚙️ Props

• data (required): An array of FAQ objects, fetched from the database or passed as static data. Each FAQ object should match the FAQType schema from the database.
• accordionCollapsible (optional): Boolean value to specify if the accordion is collapsible. Defaults to true.
• accordionType (optional): Determines whether the accordion allows for single or multiple expanded sections.
• accordionVariant (optional): Choose from three accordion styles:
  • split: Displays questions and answers in a split layout.
  • outline: Features outlined accordion sections.
  • default: Standard accordion style.
• className (optional): Tailwind CSS classes to customize the main container of the FAQ section.

👀 Preview and Code

Preview

Code

import { createClient } from '@repo/supabase/server'
import FAQ from '@repo/ui/blocks/faq/FAQ'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import SectionHeader from '@repo/ui/blocks/others/SectionHeader'

const Component = async () => {
  const supabase = await createClient()

  const { data: faqData, error: faqError } = await supabase
    .from('faqs')
    .select('*')
    .eq('is_featured', true)
    .order('id', { ascending: true })

  if (faqError) {
    console.error('Error fetching faqs: ', faqError.message)

    return
  }

  const halfLength = Math.ceil(faqData.length / 2)
  const firstHalf = faqData.slice(0, halfLength)
  const secondHalf = faqData.slice(halfLength)

  return (
    <SectionWrapper className='...'>
      <SectionHeader title={'...'} subtitle={'...'} />
      {faqData.length < 2 ? (
        <FAQ accordionVariant='split' data={faqData} />
      ) : (
        <div className='grid items-start gap-8 md:gap-12 lg:grid-cols-2'>
          <FAQ accordionVariant='split' data={firstHalf} />
          <FAQ accordionVariant='split' data={secondHalf} />
        </div>
      )}
    </SectionWrapper>
  )
}

export default Component