nexo-solutions-review-carousel/README.md

A customizable review carousel component for React applications

# Review Carousel Component

A reusable, responsive review carousel component for React applications.

## Features

- Mobile-responsive design with swiper for small screens
- Automatic scrolling carousel for desktop
- Review detail modal
- Customizable colors and translations
- Fallback avatar generation for missing images
- TypeScript support

## Installation

```bash
npm install nexo-solutions-review-carousel
```

## Quick Start

```jsx
import React from 'react';
import { ReviewCarousel } from 'nexo-solutions-review-carousel';

// IMPORTANT: Import required CSS files
import 'nexo-solutions-review-carousel/dist/index.css';
import 'swiper/css';
import 'swiper/css/pagination';

// Example component
function ReviewsSection() {
  const reviews = [
    {
      name: "John Doe",
      location: { en: "New York", pt: "Nova Iorque" },
      comment: { 
        en: "Great experience! The food was amazing.",
        pt: "Ótima experiência! A comida estava incrível."
      },
      rating: 5,
      image: "/images/john.jpg",
      sourceUrl: "https://maps.google.com/..."
    },
    // Add more reviews...
  ];

  return (
    <div className="reviews-section">
      <h2>Customer Reviews</h2>
      <ReviewCarousel 
        reviews={reviews}
        language="en"
        accentColor="#ff9900"
      />
    </div>
  );
}
```

## Required Setup

1. **Add Font Awesome to your HTML**
   
   ```html
   <link 
     rel="stylesheet" 
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" 
   />
   ```

2. **Install peer dependencies**

   Make sure you have the peer dependencies installed:
   
   ```bash
   npm install swiper
   ```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `reviews` | Review[] | Yes | Array of review objects |
| `language` | string | Yes | Current language code (e.g., 'en', 'pt') |
| `accentColor` | string | No | Custom color for stars and pagination bullets (default: '#ffc800') |
| `sourceIconUrl` | string | No | Custom icon URL for review source (default: Google icon) |
| `onReviewClick` | function | No | Custom handler for review click (if not provided, opens modal) |
| `translations` | object | No | Custom text for UI elements |

## Review Object Structure

```ts
interface Review {
  name: string;              // Reviewer name
  image: string;             // Reviewer avatar URL
  comment: {                 // Review content in different languages
    [key: string]: string;   // e.g., { en: "Great place!", pt: "Ótimo lugar!" }
  };
  location: {                // Reviewer location in different languages
    [key: string]: string;   // e.g., { en: "New York", pt: "Nova Iorque" }
  };
  rating: number;            // Star rating (1-5)
  sourceUrl?: string;        // Link to original review
  isLocalGuide?: boolean;    // Optional flag for local guides
}
```

## Troubleshooting

- **CSS not loading**: Make sure you're importing all three required CSS files
- **Icons not showing**: Check that Font Awesome is properly loaded in your HTML
- **Missing dependencies**: Ensure swiper is installed in your project

## Customization

You can customize the component by:

1. Modifying colors with the `accentColor` prop
2. Providing custom translations
3. Overriding the CSS with more specific selectors in your own stylesheet

## License

MIT