Testimonials

The following testimonials component is used for showing testimonials from clients or customers. You can use it as a single component and style it extensively by yourself if you desire. You have to pass in an array of data which can also be from an API.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Testimonials from './components/testimonials';

const App = () => {
  const testimonialsData = [
    {
      testimonial: "This product has changed my life for the better!",
      author: "Jane Doe",
      role: "Customer",
      image: "https://via.placeholder.com/64",
    },
    {
      testimonial: "Amazing service and fantastic support.",
      author: "John Smith",
      role: "Business Owner",
      image: "https://via.placeholder.com/64",
    },
    {
      testimonial: "I would highly recommend this to anyone.",
      author: "Emily Johnson",
      role: "Influencer",
      image: "https://via.placeholder.com/64",
    },
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">What Our Customers Say</h1>
      <Testimonials
        testimonials={testimonialsData}
        className="my-4" // Additional class for the container
        layout="grid" // Change to "flex" for a vertical layout
        cardClassName="bg-white border-gray-300" // Class for each card
      />
    </div>
  );
};

export default App;

Component

testimonials.jsx

// Testimonials.jsx
import React from 'react';

const TestimonialCard = ({ testimonial, author, role, image, className }) => {
  return (
    <div className={`p-4 border rounded-lg shadow-md ${className}`}>
      {image && (
        <div className="mb-2">
          <img src={image} alt={author} className="w-16 h-16 rounded-full" />
        </div>
      )}
      <p className="text-gray-700 italic">"{testimonial}"</p>
      <p className="mt-2 font-semibold">{author}</p>
      {role && <p className="text-sm text-gray-500">{role}</p>}
    </div>
  );
};

const Testimonials = ({ testimonials, className = '', layout = 'grid', cardClassName = '' }) => {
  const layoutClass = layout === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' : 'flex flex-col space-y-4';

  return (
    <div className={`${layoutClass} ${className}`}>
      {testimonials.map((item, index) => (
        <TestimonialCard
          key={index}
          testimonial={item.testimonial}
          author={item.author}
          role={item.role}
          image={item.image}
          className={cardClassName}
        />
      ))}
    </div>
  );
};

export default Testimonials;