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:
- Renders a list of FAQ questions and answers within an accordion.
- Displays a title "Frequently asked questions".
- Provides a contact email for additional questions.
- Wraps the content in a Section component for consistent styling.
- 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:
- Modify the Tailwind CSS classes to change the appearance.
- Adjust the title and contact information text.
- Customize the Section and Accordion components for different layouts.
Accessibility
To ensure accessibility:
- The Accordion component should handle proper ARIA attributes for expandable/collapsible content.
- The email link is keyboard accessible.
- Ensure sufficient color contrast for text readability.
Best Practices and Improvements
- Consider adding a prop for the title to make it customizable.
- Implement error handling for cases where
faqs
is empty or undefined. - 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.