The Accordion component allows you to present collapsible sections of content, ideal for FAQs or long content sections.

• Type: Interactive UI element

• Properties: sections, activeSection, onSectionChange

• Usage:

  <Accordion
    sections={[
      { title: 'Section 1', content: 'Content for section 1' },
      { title: 'Section 2', content: 'Content for section 2' },
      { title: 'Section 3', content: 'Content for section 3' }
    ]}
    activeSection={activeSection}
    onSectionChange={(sectionIndex) => setActiveSection(sectionIndex)}
  />

  <Accordion
    sections={[
      { title: 'Section 1', content: 'Content for section 1' },
      { title: 'Section 2', content: 'Content for section 2' },
      { title: 'Section 3', content: 'Content for section 3' }
    ]}
    activeSection={activeSection}
    onSectionChange={(sectionIndex) => setActiveSection(sectionIndex)}
  />

  <Accordion
    sections={[
      { title: 'Section 1', content: 'Content for section 1' },
      { title: 'Section 2', content: 'Content for section 2' },
      { title: 'Section 3', content: 'Content for section 3' }
    ]}
    activeSection={activeSection}
    onSectionChange={(sectionIndex) => setActiveSection(sectionIndex)}
  />

• Customization Options:

  • Customize accordion styles, including accordion title styles, icon animations, and content padding.