62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { testimonials } from "@/data/site";
|
|
|
|
function QuoteIcon() {
|
|
return (
|
|
<svg className="quote-icon" width="29" height="29" viewBox="0 0 24 24" aria-hidden>
|
|
<path
|
|
fill="currentColor"
|
|
d="M7.2 19.2c-1.7 0-3.1-.6-4.1-1.7S1.5 14.8 1.5 13c0-2 .5-3.8 1.6-5.5S5.7 4.5 7.8 3.6l.9 1.6c-1.5.7-2.6 1.6-3.3 2.8-.7 1.1-1 2.3-1 3.5 0 .4.1.6.4.7.7.2 1.3.6 1.8 1.1.5.5.8 1.2.8 2 0 1-.3 1.8-1 2.5-.7.7-1.5 1-2.2 1.4zm11.2 0c-1.7 0-3.1-.6-4.1-1.7s-1.6-2.7-1.6-4.5c0-2 .5-3.8 1.6-5.5s2.6-3 4.7-3.9l.9 1.6c-1.5.7-2.6 1.6-3.3 2.8-.7 1.1-1 2.3-1 3.5 0 .4.1.6.4.7.7.2 1.3.6 1.8 1.1.5.5.8 1.2.8 2 0 1-.3 1.8-1 2.5-.6.7-1.4 1.4-2.2 1.4z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function Testimonials({ title }: { title?: string }) {
|
|
const [index, setIndex] = useState(0);
|
|
const visible = [0, 1, 2].map((offset) => {
|
|
const item = testimonials[(index + offset) % testimonials.length];
|
|
return { item, key: `${index}-${offset}` };
|
|
});
|
|
|
|
return (
|
|
<section className="testimonial-main-container" id="testimonial">
|
|
<div className="container-fluid">
|
|
<div className="section-title" style={{ textAlign: "center" }}>
|
|
<h2>{title || "نظر برخی مراجعه کنندگان عزیز"}</h2>
|
|
<p className="kicker latin">USER COMMENTS</p>
|
|
</div>
|
|
|
|
<div className="testimonial-slider">
|
|
<div className="testimonial-track">
|
|
{visible.map(({ item, key }) => (
|
|
<article className="testimonial-inner" key={key}>
|
|
<div className="testimonial-right-inner">
|
|
<QuoteIcon />
|
|
<p>{item.text}</p>
|
|
<cite>{item.author}</cite>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<div className="testimonial-dots">
|
|
{testimonials.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
className={i === index ? "active" : undefined}
|
|
aria-label={`نظر ${i + 1}`}
|
|
onClick={() => setIndex(i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|