74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { testimonials } from "@/data/pages";
|
|
import styles from "@/app/about/about.module.css";
|
|
|
|
export default function CommentCarousel() {
|
|
const [index, setIndex] = useState(0);
|
|
const total = testimonials.length;
|
|
const item = testimonials[index];
|
|
|
|
const prev = () => setIndex((i) => (i - 1 + total) % total);
|
|
const next = () => setIndex((i) => (i + 1) % total);
|
|
|
|
return (
|
|
<div className={styles.comments}>
|
|
<div className={styles.commentHead}>
|
|
<div className={styles.arrows}>
|
|
<button
|
|
className={styles.arrowBtn}
|
|
type="button"
|
|
aria-label="Previous review"
|
|
onClick={prev}
|
|
>
|
|
<img
|
|
className={styles.arrowPrev}
|
|
src="/images/icons/chevron.svg"
|
|
alt=""
|
|
width={8}
|
|
height={14}
|
|
/>
|
|
</button>
|
|
<button
|
|
className={styles.arrowBtn}
|
|
type="button"
|
|
aria-label="Next review"
|
|
onClick={next}
|
|
>
|
|
<img src="/images/icons/chevron.svg" alt="" width={8} height={14} />
|
|
</button>
|
|
</div>
|
|
<div className={styles.sectionHead}>
|
|
<h2 className={styles.sectionTitle}>People comment</h2>
|
|
<p className={styles.sectionSub}>
|
|
some of our most crowded categories
|
|
</p>
|
|
</div>
|
|
<span className={styles.commentCount} aria-live="polite">
|
|
{index + 1} / {total}
|
|
</span>
|
|
</div>
|
|
|
|
<div className={styles.commentTrack} key={item.meta}>
|
|
<p className={styles.quote}>{item.body}</p>
|
|
<p className={styles.meta}>{item.meta}</p>
|
|
</div>
|
|
|
|
<div className={styles.dots} role="tablist" aria-label="Reviews">
|
|
{testimonials.map((review, i) => (
|
|
<button
|
|
key={review.meta}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={i === index}
|
|
aria-label={`Show review ${i + 1}`}
|
|
className={i === index ? styles.dotActive : styles.dot}
|
|
onClick={() => setIndex(i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|