57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { Star, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
|
|
|
// Customer review data
|
|
const reviews = [
|
|
{
|
|
id: 1,
|
|
name: 'Andrew Sarma',
|
|
role: 'Entrepreneur',
|
|
review: 'Salty helped me a lot in finding the best place for our first outdoor adventure trip. They responded very quickly and gave me a detailed account of the place— its history, as well as its best features.',
|
|
rating: 5,
|
|
image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdCUyMGJ1c2luZXNzfGVufDF8fHx8MTc1NjEyNDA4M3ww&ixlib=rb-4.1.0&q=80&w=1080'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Sarah Chen',
|
|
role: 'Travel Blogger',
|
|
review: 'The Melbourne City Card exceeded all my expectations! The instant QR access made exploring so convenient, and I saved nearly 40% on attraction tickets. The exclusive perks were incredible.',
|
|
rating: 5,
|
|
image: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3b21hbiUyMHBvcnRyYWl0JTIwc21pbGluZ3xlbnwxfHx8fDE3NTYxMjQwODd8MA&ixlib=rb-4.1.0&q=80&w=1080'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Marcus Rodriguez',
|
|
role: 'Family Traveler',
|
|
review: 'Traveling with kids can be challenging, but CityCards made it seamless. The skip-the-line access and family-friendly recommendations were game-changers for our Melbourne trip.',
|
|
rating: 5,
|
|
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdCUyMHNtaWxpbmd8ZW58MXx8fHwxNzU2MTI0MDkxfDA&ixlib=rb-4.1.0&q=80&w=1080'
|
|
}
|
|
];
|
|
|
|
export function ReviewsSection() {
|
|
const [currentReview, setCurrentReview] = useState(0);
|
|
|
|
const nextReview = () => {
|
|
setCurrentReview((prev) => (prev + 1) % reviews.length);
|
|
};
|
|
|
|
const prevReview = () => {
|
|
setCurrentReview((prev) => (prev - 1 + reviews.length) % reviews.length);
|
|
};
|
|
|
|
const renderStars = (rating: number) => {
|
|
return Array.from({ length: 5 }, (_, index) => (
|
|
<Star
|
|
key={index}
|
|
className={`w-4 h-4 ${
|
|
index < rating ? 'text-yellow-400 fill-current' : 'text-gray-300'
|
|
}`}
|
|
/>
|
|
));
|
|
};
|
|
|
|
return null;
|
|
} |