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:

1. Modify the testimonials array to add, remove, or change testimonials.
2. Adjust the Tailwind CSS classes to change the appearance, spacing, or colors.
3. Modify the heading text or link to the testimonials page.
4. Customize the Carousel component props to change its behavior or appearance.

Accessibility

To improve accessibility:

1. Ensure that the Carousel component is keyboard navigable.
2. Add appropriate ARIA labels to the carousel navigation buttons.
3. Consider adding a visually hidden text description for screen readers to explain the carousel functionality.

Best Practices and Improvements

1. Consider making the testimonials array a prop, allowing the parent component to pass in different sets of testimonials.
2. Implement lazy loading for testimonial images to improve performance.
3. Add error boundaries to handle potential issues with testimonial data or carousel functionality.
4. Consider adding animations or transitions when switching between testimonials for a smoother user experience.
5. 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.