FAQ Component

The FAQ component is a React component designed to display a list of frequently asked questions in an accordion format. It utilizes the FAQQuestion component to render individual questions and answers, and provides a clean, organized layout for presenting FAQs.

Importing the Component

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

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

Component Props

The FAQ component accepts the following props:

Prop	Type	Description
faqs	FAQQuestionProps[]	An array of FAQ questions and answers

Where FAQQuestionProps is defined as:

type FAQQuestionProps = {
  question: string;
  answer: ReactElement | string;
};

Basic Usage

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

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

const faqData = [
  {
    question: 'What is your return policy?',
    answer: 'We offer a 30-day return policy.',
  },
  {
    question: 'How long does shipping take?',
    answer: 'Shipping typically takes 3-5 business days.',
  },
];

<FAQ faqs={faqData} />;

Functionality

The FAQ component provides the following functionality:

1. Renders a list of FAQ questions and answers within an accordion.
2. Displays a title "Frequently asked questions".
3. Provides a contact email for additional questions.
4. Wraps the content in a Section component for consistent styling.
5. Uses responsive design for different screen sizes.

Styling

The component uses Tailwind CSS for styling. Key styling features include:

• Responsive padding and max-width for different screen sizes.
• Centered layout using flexbox.
• Background color and rounded corners for the FAQ container.
• Custom text colors for primary and secondary text.

Dependencies

This component relies on the following:

• React
• Next.js (for the Link component)
• Accordion component from your UI library
• FAQQuestion component
• Section component
• SiteConfig for the support email

Customization

To customize the FAQ component, you can:

1. Modify the Tailwind CSS classes to change the appearance.
2. Adjust the title and contact information text.
3. Customize the Section and Accordion components for different layouts.

Accessibility

To ensure accessibility:

1. The Accordion component should handle proper ARIA attributes for expandable/collapsible content.
2. The email link is keyboard accessible.
3. Ensure sufficient color contrast for text readability.

Best Practices and Improvements

1. Consider adding a prop for the title to make it customizable.
2. Implement error handling for cases where faqs is empty or undefined.
3. Add PropTypes or TypeScript prop validation for better type safety.

Example Usage

Here's an example of how you might use the FAQ component in a page:

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

const faqData = [
  {
    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>
    ),
  },
];

const FAQPage = () => {
  return (
    <div className='container mx-auto py-8'>
      <h1 className='text-4xl font-bold text-center mb-8'>FAQ</h1>
      <FAQ faqs={faqData} />
    </div>
  );
};

export default FAQPage;

This example demonstrates how to use the FAQ component to create a full FAQ page, passing in an array of questions and answers.

---

By using the FAQ component, you can easily create a comprehensive and visually appealing FAQ section in your React application. Remember to customize the content and styling to fit your specific use case and design requirements.