68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { IconPlayerPauseFilled, IconPlayerPlayFilled, IconPoint, IconPointFilled } from '@tabler/icons-react';
|
|
|
|
type Testimonial = {
|
|
name: string;
|
|
title: string;
|
|
avatar?: string;
|
|
quote: string;
|
|
};
|
|
|
|
type TestimonialsProps = {
|
|
items: Testimonial[];
|
|
};
|
|
|
|
export default function Testimonials({ items }: TestimonialsProps) {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(true);
|
|
const active = items[activeIndex];
|
|
|
|
if (!active) return null;
|
|
|
|
useEffect(() => {
|
|
if (items.length <= 1 || !isPlaying) return;
|
|
|
|
const id = setInterval(() => {
|
|
setActiveIndex((i) => (i + 1) % items.length);
|
|
}, 5000);
|
|
|
|
return () => clearInterval(id);
|
|
}, [items.length, isPlaying]);
|
|
|
|
return (
|
|
<section className="w-full">
|
|
{/* header: avatar + name + title */}
|
|
<header className="flex items-center gap-3">
|
|
{/* TODO: avatar */}
|
|
<div>
|
|
<div>{active.name}</div>
|
|
<div>{active.title}</div>
|
|
</div>
|
|
</header>
|
|
|
|
<blockquote>{active.quote}</blockquote>
|
|
|
|
<footer className="flex items-center justify-between">
|
|
<div className="flex mt-3">
|
|
{items.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setActiveIndex(i)}
|
|
aria-label={`Go to testimonial ${i + 1}`}
|
|
>
|
|
{i === activeIndex ? <IconPointFilled /> : <IconPoint />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* TODO: play/pause button + auto-rotate timer */}
|
|
<button onClick={() => setIsPlaying(!isPlaying)} aria-label={isPlaying ? "Pause" : "Play"}>
|
|
{isPlaying ? <IconPlayerPauseFilled /> : <IconPlayerPlayFilled />}
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
);
|
|
}
|