57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "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 active = items[activeIndex];
|
|
|
|
if (!active) return null;
|
|
|
|
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>
|
|
|
|
{/* quote */}
|
|
<blockquote>{active.quote}</blockquote>
|
|
|
|
{/* controls: pagination dots + play/pause */}
|
|
<footer className="flex items-center justify-between">
|
|
<div className="flex gap-2">
|
|
{items.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setActiveIndex(i)}
|
|
aria-label={`Go to testimonial ${i + 1}`}
|
|
>
|
|
{/* TODO: dot styling */}
|
|
{i === activeIndex ? "●" : "○"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* TODO: play/pause button + auto-rotate timer */}
|
|
<button aria-label="Pause">⏸</button>
|
|
</footer>
|
|
</section>
|
|
);
|
|
}
|