92 lines
3.9 KiB
TypeScript
92 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
import styles from './Testimonials.module.css'
|
|
import { testimonialData } from '@/utils/constant'
|
|
|
|
const testimonials = testimonialData
|
|
|
|
export default function Testimonials() {
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const nextSlide = () => {
|
|
setCurrentIndex((prev) => (prev + 1) % (testimonials.length - 2))
|
|
}
|
|
|
|
const prevSlide = () => {
|
|
setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 3 : prev - 1))
|
|
}
|
|
|
|
// Auto-slide effect
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
nextSlide()
|
|
}, 5000) // Change slide every 5 seconds
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
// Get the 3 visible testimonials
|
|
const getVisibleTestimonials = () => {
|
|
const items = []
|
|
for (let i = 0; i < 3; i++) {
|
|
const index = (currentIndex + i) % testimonials.length
|
|
items.push(testimonials[index])
|
|
}
|
|
return items
|
|
}
|
|
|
|
const visibleItems = getVisibleTestimonials()
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
|
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
|
<span>ANTALYA</span>
|
|
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
|
</div>
|
|
<h2 className={styles.title}>Testimonials</h2>
|
|
|
|
<div className={styles.sliderContainer}>
|
|
<button className={`${styles.arrow} ${styles.prevArrow}`} onClick={prevSlide}>←</button>
|
|
|
|
{visibleItems.map((item) => (
|
|
<div key={item.id} className={styles.card}>
|
|
<div className={styles.avatarContainer}>
|
|
<div className={styles.avatar} style={{ overflow: 'hidden' }}>
|
|
<div className={styles.authorImageWrapper}>
|
|
<Image
|
|
src={item.image}
|
|
alt={`${item.name} - Review ${item.id}`}
|
|
fill
|
|
className={styles.authorImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 className={styles.name}>— {item.name}</h3>
|
|
<p className={styles.testimonialText}>"{item.text}"</p>
|
|
<div style={{ fontSize: '1.5rem', color: '#ffdf00', textAlign: 'center', letterSpacing: '3px', marginTop: '20px' }}>
|
|
{'★★★★★'}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<button className={`${styles.arrow} ${styles.nextArrow}`} onClick={nextSlide}>→</button>
|
|
</div>
|
|
|
|
<div className={styles.buttonContainer}>
|
|
<a
|
|
href="https://www.google.com/search?sca_esv=fb3147f266a54277&sxsrf=AE3TifPK9lVB_UK5Mt9ko4Ht65w63RgqUQ:1764431326889&si=AMgyJEtREmoPL4P1I5IDCfuA8gybfVI2d5Uj7QMwYCZHKDZ-E3A-qenJpQm2J1V3Wa6_UKYzIQhT0idJrAopWIgZ0RiDDHrNP0RtPpfTzWgU2637exPDNkEZu0WuVN4TEdgoYqqtQwcWsOUIFi4JvvmrZPyybRzrcg%3D%3D&q=Antalya+Turkish+Restaurant+Reviews&sa=X&ved=2ahUKEwic4uDz2peRAxUbTmwGHWwWBRoQ0bkNegQIJRAE&biw=1528&bih=786&dpr=1.25&zx=1764431335803&no_sw_cr=1#lrd=0x882bf532910f4e25:0x4aee10507689253d,3,,,,"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={styles.button}
|
|
>
|
|
Review Us on Google
|
|
</a>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|