testimonal-slider

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import Image from "next/image"
5import { Transition } from "@headlessui/react"
6 
7interface Testimonial {
8  img: string
9  quote: string
10  name: string
11  role: string
12}
13 
14export default function FancyTestimonialsSlider({
15  testimonials,
16  autorotateTiming = 7000,
17}: {
18  testimonials: Testimonial[]
19  autorotateTiming?: number
20}) {
21  const testimonialsRef = useRef<HTMLDivElement>(null)
22  const [active, setActive] = useState<number>(0)
23  const [autorotate, setAutorotate] = useState<boolean>(true)
24 
25  useEffect(() => {
26    if (!autorotate) return
27    const interval = setInterval(() => {
28      setActive(active + 1 === testimonials.length ? 0 : (active) => active + 1)
29    }, autorotateTiming)
30    return () => clearInterval(interval)
31  }, [active, autorotate])
32 
33  const heightFix = () => {
34    if (testimonialsRef.current && testimonialsRef.current.parentElement)
35      testimonialsRef.current.parentElement.style.height = `${testimonialsRef.current.clientHeight}px`
36  }
37 
38  useEffect(() => {
39    heightFix()
40  }, [])
41 
42  return (
43    <div className="mx-auto w-full max-w-3xl px-4 text-center sm:px-6">
44      {/* Testimonial image */}
45      <div className="relative h-24 sm:h-32">
46        <div className="pointer-events-none absolute top-0 left-1/2 h-[320px] w-[320px] -translate-x-1/2 before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-gradient-to-b before:from-cyan-500/25 before:via-cyan-500/5 before:via-25% before:to-cyan-500/0 before:to-75% sm:h-[480px] sm:w-[480px]">
47          <div className="h-24 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_20%,theme(colors.white))] sm:h-32">
48            {testimonials.map((testimonial, index) => (
49              <Transition
50                as="div"
51                key={index}
52                show={active === index}
53                className="absolute inset-0 -z-10 h-full"
54                enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 order-first"
55                enterFrom="opacity-0 -rotate-[60deg]"
56                enterTo="opacity-100 rotate-0"
57                leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700"
58                leaveFrom="opacity-100 rotate-0"
59                leaveTo="opacity-0 rotate-[60deg]"
60                beforeEnter={() => heightFix()}
61              >
62                <Image
63                  className="relative top-8 left-1/2 -translate-x-1/2 rounded-full sm:top-11"
64// … truncated