86 lines
4.2 KiB
TypeScript
86 lines
4.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
|
|
import { SectionHeading } from '../SectionHeading';
|
|
import { useSite } from '../../api';
|
|
import { useLang } from '../../i18n/lang';
|
|
import { EditableItem } from '../../admin/Editable';
|
|
|
|
export function Testimonials() {
|
|
const { testimonials } = useSite();
|
|
const { t } = useLang();
|
|
const [index, setIndex] = useState(0);
|
|
const current = testimonials[Math.min(index, Math.max(testimonials.length - 1, 0))];
|
|
if (!current) return null;
|
|
|
|
const go = (dir: number) => {
|
|
setIndex((prev) => (prev + dir + testimonials.length) % testimonials.length);
|
|
};
|
|
|
|
return (
|
|
<section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
|
|
<div className="mx-auto max-w-site px-6 lg:px-10">
|
|
<SectionHeading headingKey="testimonials" align="center" />
|
|
|
|
<div className="relative mx-auto mt-14 max-w-3xl text-center">
|
|
<QuoteIcon className="mx-auto h-8 w-8 text-copper/60" aria-hidden="true" />
|
|
<AnimatePresence mode="wait">
|
|
<motion.blockquote
|
|
key={current.id}
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -12 }}
|
|
transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
|
|
|
|
<EditableItem resource="testimonials" item={current}>
|
|
<p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{current.quote}»</p>
|
|
<footer className="mt-8">
|
|
<p className="text-base font-bold text-copper">{current.name}</p>
|
|
<p className="mt-1 text-sm font-light text-ivory/45">{current.role}</p>
|
|
</footer>
|
|
</EditableItem>
|
|
</motion.blockquote>
|
|
</AnimatePresence>
|
|
|
|
<div className="mt-12 flex items-center justify-center gap-5">
|
|
<button
|
|
type="button"
|
|
onClick={() => go(1)}
|
|
aria-label={t('prevTestimonial')}
|
|
className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
|
|
>
|
|
<ChevronRightIcon className="h-5 w-5 ltr:rotate-180 transition-transform duration-300 ease-lux rtl:group-hover:translate-x-0.5 ltr:group-hover:-translate-x-0.5" />
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2" role="tablist" aria-label={t('selectTestimonialAria')}>
|
|
{testimonials.map((item, i) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={i === index}
|
|
aria-label={`${t("testimonialByPrefix")} ${item.name}`}
|
|
onClick={() => setIndex(i)}
|
|
className={`h-2 rounded-full transition-all duration-300 ease-lux ${
|
|
i === index
|
|
? 'w-8 bg-copper shadow-[0_0_12px_rgba(197,143,92,0.6)]'
|
|
: 'w-2.5 bg-ivory/20 hover:bg-ivory/40'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => go(-1)}
|
|
aria-label={t('nextTestimonial')}
|
|
className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
|
|
>
|
|
<ChevronLeftIcon className="h-5 w-5 ltr:rotate-180 transition-transform duration-300 ease-lux rtl:group-hover:-translate-x-0.5 ltr:group-hover:translate-x-0.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |