Portable Testimonials Component

A reusable testimonials carousel component for React projects with both mobile and desktop support.

Features

• Responsive design with different layouts for mobile and desktop
• Swiper integration for mobile view
• Google integration for reviews
• Support for review images with gallery view
• User images with fallback to initials
• Customizable through props
• Built-in placeholder data

Installation

1. Copy the PortableTestimonials folder to your project
2. Install required dependencies:

npm install swiper react-dom

Usage

Basic usage:

import { PortableTestimonials } from './components/PortableTestimonials';

function App() {
  return (
    <div className="App">
      <PortableTestimonials />
    </div>
  );
}

With custom testimonials:

import { PortableTestimonials } from './components/PortableTestimonials';
import { TestimonialItem } from './components/PortableTestimonials/TestimonialTypes';

function App() {
  const myTestimonials: TestimonialItem[] = [
    {
      name: "John Smith",
      reviewerNumberOfReviews: 42,
      isLocalGuide: true,
      reviewerPhotoUrl: "/images/john.jpg",
      stars: 5,
      text: "Amazing service! Highly recommend.",
      reviewUrl: "https://www.google.com/maps/place/YourBusiness"
    },
    // Add more testimonials...
  ];

  return (
    <div className="App">
      <PortableTestimonials 
        testimonials={myTestimonials}
        language="en"
        showGoogleButton={true}
        googleUrl="https://www.google.com/maps/place/YourBusiness"
        title="Customer Testimonials"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | testimonials | TestimonialItem[] | Placeholder data | Array of testimonial items | | language | string | 'en' | Language for UI text ('en' or 'pt' supported) | | showGoogleButton | boolean | true | Whether to show the Google button | | googleUrl | string | 'https://www.google.com/maps' | URL for the Google button | | googleButtonText | string | Based on language | Custom text for the Google button | | title | string | Based on language | Title for the testimonials section |

TestimonialItem Interface

interface TestimonialItem {
  name: string;
  reviewerNumberOfReviews: number;
  isLocalGuide: boolean;
  title?: string;
  reviewerPhotoUrl: string;
  reviewOrigin?: string;
  stars: number;
  text: string;
  url?: string;
  reviewUrl?: string;
  sourceUrl?: string;
  reviewImageUrls?: string[];
}

Notes

• Make sure the Google logo (/images/svg/Google__G__logo.svg) is available in your project, or update the paths in the component
• For Font Awesome icons, make sure to include the Font Awesome library in your project, or replace with your own icons
• The component uses CSS variables that can be overridden in your project's CSS

Example

See TestimonialsExample.tsx for a complete usage example. # react-portable-testimonials