101 lines
3.6 KiB
TypeScript
101 lines
3.6 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 ? (
|
|
<div className="relative mt-12">
|
|
{total > 1 ? (
|
|
<button
|
|
onClick={() => setI((p) => (p - 1 + total) % total)}
|
|
className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
|
aria-label="Previous"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
) : null}
|
|
|
|
<figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
|
|
<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>
|
|
|
|
{total > 1 ? (
|
|
<button
|
|
onClick={() => setI((p) => (p + 1) % total)}
|
|
className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
|
aria-label="Next"
|
|
>
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
) : null}
|
|
|
|
{total > 1 ? (
|
|
<div className="mt-8 flex items-center justify-center gap-3 md:hidden">
|
|
<button
|
|
onClick={() => setI((p) => (p - 1 + total) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
|
aria-label="Previous"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => setI((p) => (p + 1) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
|
aria-label="Next"
|
|
>
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|