82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { useState } from "react";
|
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
import { Typography } from "@/components/Typography";
|
|
|
|
export type TestimonialsProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
items: Array<{
|
|
quote: string;
|
|
author: string;
|
|
role: string;
|
|
avatar?: string;
|
|
}>;
|
|
};
|
|
|
|
export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
|
|
const [i, setI] = useState(0);
|
|
const total = items.length;
|
|
const item = items[i];
|
|
|
|
return (
|
|
<section className="bg-muted/40 py-20 md:py-28">
|
|
<div className="container mx-auto max-w-4xl px-6 text-center">
|
|
{tagline ? (
|
|
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
{heading ? <Typography variant="h2">{heading}</Typography> : null}
|
|
|
|
{item ? (
|
|
<figure className="mx-auto mt-12 flex max-w-2xl flex-col items-center">
|
|
<blockquote
|
|
className="text-balance text-foreground"
|
|
style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
|
|
>
|
|
{item.quote}
|
|
</blockquote>
|
|
<figcaption className="mt-8 flex items-center gap-3">
|
|
{item.avatar ? (
|
|
<img
|
|
src={item.avatar}
|
|
alt={item.author}
|
|
className="h-10 w-10 rounded-full object-cover"
|
|
/>
|
|
) : null}
|
|
<div className="text-left">
|
|
<p className="text-sm font-medium">{item.author}</p>
|
|
{item.role ? (
|
|
<p className="text-xs text-muted-foreground">{item.role}</p>
|
|
) : null}
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
) : null}
|
|
|
|
{total > 1 ? (
|
|
<div className="mt-10 flex items-center justify-center gap-3">
|
|
<button
|
|
onClick={() => setI((p) => (p - 1 + total) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
|
|
aria-label="Previous"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<span className="text-xs tabular-nums text-muted-foreground">
|
|
{i + 1} / {total}
|
|
</span>
|
|
<button
|
|
onClick={() => setI((p) => (p + 1) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
|
|
aria-label="Next"
|
|
>
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|