Testimonials Component
The Testimonials component is a React component that showcases customer testimonials in a carousel format. It uses the TestimonialItem component to display individual testimonials and provides navigation controls for browsing through the testimonials.
Importing the Component
To use the Testimonials component in your React application, import it as follows:
import Testimonials from '@/components/Testimonials';
Component Structure
The Testimonials component doesn't accept any props directly. Instead, it uses a predefined array of testimonials and renders them using the Carousel and TestimonialItem components.
Usage
Here's a basic example of how to use the Testimonials component:
import Testimonials from '@/components/Testimonials';
const HomePage = () => {
return (
<div>
<h1>Welcome to Our Product</h1>
<Testimonials />
</div>
);
};
Component Breakdown
Let's break down the key features of the Testimonials component:
Testimonial Data
The component uses a predefined array of testimonials:
export const testimonials: ITestimonialItemProps[] = [
{
text: `I was looking for a way to make more money. And I found it with ${SiteConfig.name}. Now I keep recommending this to all my friends.`,
name: 'John Doe',
highlightSentences: ['Now I keep recommending this to all my friends'],
job: 'CEO at WP Elevation',
pictureUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704g',
},
// ... more testimonials
];
Carousel Implementation
The component uses the Carousel component from @/components/ui/carousel
to create a sliding testimonial display:
<Carousel setApi={setApi} className='w-full max-w-xs mt-5'>
<CarouselContent>
{testimonials.map((testimonial, index) => (
<CarouselItem key={index}>
<Card>
<CardContent className='flex aspect-square items-center justify-center p-6'>
<TestimonialItem
key={index}
text={testimonial.text}
name={testimonial.name}
highlightSentences={testimonial.highlightSentences}
job={testimonial.job}
pictureUrl={testimonial.pictureUrl}
/>
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
Carousel State Management
The component uses React hooks to manage the state of the carousel:
const [api, setApi] = React.useState<CarouselApi>();
const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0);
React.useEffect(() => {
if (!api) {
return;
}
setCount(api.scrollSnapList().length);
setCurrent(api.selectedScrollSnap() + 1);
api.on("select", () => {
setCurrent(api.selectedScrollSnap() + 1);
});
}, [api]);
This code keeps track of the current slide and total number of slides, updating the display accordingly.
Slide Counter
The component displays the current slide number and total number of slides:
<div className='py-2 text-center text-sm text-muted-foreground'>
Slide {current} of {count}
</div>
Styling
The Testimonials component uses Tailwind CSS for styling. Key styling features include:
- Centered layout with specific margin top and bottom
- Responsive text sizing for the heading
- Custom styling for the "See more" link
- Carousel width and spacing
Customization
To customize the Testimonials component:
- Modify the
testimonials
array to add, remove, or change testimonials. - Adjust the Tailwind CSS classes to change the appearance, spacing, or colors.
- Modify the heading text or link to the testimonials page.
- Customize the Carousel component props to change its behavior or appearance.
Accessibility
To improve accessibility:
- Ensure that the Carousel component is keyboard navigable.
- Add appropriate ARIA labels to the carousel navigation buttons.
- Consider adding a visually hidden text description for screen readers to explain the carousel functionality.
Best Practices and Improvements
- Consider making the
testimonials
array a prop, allowing the parent component to pass in different sets of testimonials. - Implement lazy loading for testimonial images to improve performance.
- Add error boundaries to handle potential issues with testimonial data or carousel functionality.
- Consider adding animations or transitions when switching between testimonials for a smoother user experience.
- Implement responsive design to adjust the layout and size of testimonials on different screen sizes.
Example Usage in a Page
Here's an example of how you might use the Testimonials component in a page:
import Testimonials from '@/components/Testimonials';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
const HomePage = () => {
return (
<div className='min-h-screen flex flex-col'>
<Header />
<main className='flex-grow'>
<h1 className='text-4xl font-bold text-center my-10'>
Welcome to Our Product
</h1>
<section className='py-12 bg-gray-50'>
<div className='container mx-auto'>
<h2 className='text-3xl font-bold text-center mb-8'>
What Our Customers Say
</h2>
<Testimonials />
</div>
</section>
{/* Other sections */}
</main>
<Footer />
</div>
);
};
export default HomePage;
This example demonstrates how to integrate the Testimonials component into a full page layout, providing context and structure around the testimonials section.
The Testimonials component provides an engaging way to display customer testimonials, potentially increasing trust and credibility for your product or service. By showcasing positive feedback in a carousel format, you can efficiently use space while still presenting multiple testimonials to your site visitors.