leumas-private-shared/src/Components/NestedFAQ.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState } from 'react';

// Helper function to convert URLs within text into clickable links
const linkify = (text) => {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.split(urlRegex).map((part, index) => 
    urlRegex.test(part) ? <a key={index} href={part} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{part}</a> : part
  );
};

// Single FAQ Item Component with possible nested items
const FAQItem = ({ faq }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <div>
      <h2>
        <button
          onClick={toggleOpen}
          className="flex items-center justify-between w-full p-5 font-medium text-left border border-b-0 border-blue-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 gap-3"
          aria-expanded={isOpen}
        >
          <span>{faq.question}</span>
          <svg
            className={`w-6 h-6 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </h2>
      <div id={`faq-answer-${faq.id}`} className={`p-5 border border-blue-200 dark:border-blue-700 ${!isOpen ? 'hidden' : ''}`}>
        <div className="mb-2">{linkify(faq.answer)}</div>
        {/* Render Nested FAQs if any */}
        {faq.subFaqs && faq.subFaqs.length > 0 && faq.subFaqs.map((subFaq, index) => (
          <FAQItem key={index} faq={subFaq} />
        ))}
      </div>
    </div>
  );
};

// Main NestedFAQ Component
const NestedFAQ = ({ data }) => {
  return (
    <div id="accordion-nested-parent max-w-[400px]" className="space-y-4">
      {data.map((faq, index) => (
        <FAQItem key={index} faq={faq} />
      ))}
    </div>
  );
};

export default NestedFAQ;