FAQQuestion Component

The FAQQuestion component is a reusable React component designed to display frequently asked questions (FAQs) in an accordion format. It's built to work seamlessly with the Accordion component from a UI library, likely shadcn/ui or a similar component library.

Importing the Component

To use the FAQQuestion component in your React application, import it as follows:

import { FAQQuestion } from '@/components/FAQQuestion';

Component Props

The FAQQuestion component accepts the following props:

Prop	Type	Description
question	string	The text of the FAQ question
answer	ReactElement OR string	The answer to the question, can be either a string or a React element

Basic Usage

Here's a basic example of how to use the FAQQuestion component:

import { FAQQuestion } from '@/components/FAQQuestion';

<FAQQuestion
  question='What is the return policy?'
  answer='Our return policy allows returns within 30 days of purchase.'
/>;

Functionality

The FAQQuestion component provides the following functionality:

1. Renders a single FAQ question and answer within an accordion item.
2. The question acts as the accordion trigger, which can be clicked to expand or collapse the answer.
3. Supports both string and ReactElement types for the answer, allowing for rich content in responses.

Styling

The component relies on the styling provided by the Accordion components from your UI library. Ensure that you have properly set up and imported the necessary styles for these components.

Dependencies

This component relies on the following:

• React
• Accordion components from your UI library (likely shadcn/ui or similar)

Customization

To customize the FAQQuestion component, you can:

1. Modify the AccordionItem, AccordionTrigger, and AccordionContent components to change the overall appearance.
2. Pass in custom ReactElements as the answer prop for more complex answer layouts.

Accessibility

The accessibility features of this component depend largely on the implementation of the Accordion components from your UI library. Typically, these should include:

1. Proper ARIA attributes for expandable/collapsible content.
2. Keyboard navigation support.

Best Practices and Improvements

1. Consider adding an optional id prop for more specific targeting of FAQ items.
2. Implement error checking for required props.
3. Add PropTypes or TypeScript prop validation for better type safety.

Example Usage within an FAQ Section

Here's an example of how you might use multiple FAQQuestion components within an FAQ section:

import { Accordion } from '@/components/ui/accordion';
import { FAQQuestion } from '@/components/FAQQuestion';

const FAQSection = () => {
  const faqs = [
    {
      question: 'What is your return policy?',
      answer: 'We offer a 30-day return policy on all items.',
    },
    {
      question: 'How long does shipping take?',
      answer: 'Shipping typically takes 3-5 business days.',
    },
    {
      question: 'Do you ship internationally?',
      answer: (
        <span>
          Yes, we ship to select countries. Check our{' '}
          <a href='/shipping'>shipping page</a> for details.
        </span>
      ),
    },
  ];

  return (
    <section>
      <h2>Frequently Asked Questions</h2>
      <Accordion type='single' collapsible>
        {faqs.map((faq) => (
          <FAQQuestion
            key={faq.question}
            question={faq.question}
            answer={faq.answer}
          />
        ))}
      </Accordion>
    </section>
  );
};

export default FAQSection;

This example demonstrates how to use multiple FAQQuestion components within an Accordion to create a full FAQ section.

---

By using the FAQQuestion component, you can easily create consistent and interactive FAQ sections in your React application. Remember to customize the content and styling to fit your specific use case and design requirements.