{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonal-slider",
  "title": "testimonal-slider",
  "description": "A testimonial slider component.",
  "dependencies": [
    "react",
    "@headlessui/react"
  ],
  "files": [
    {
      "path": "registry/eldoraui/testimonal-slider.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport Image from \"next/image\"\nimport { Transition } from \"@headlessui/react\"\n\ninterface Testimonial {\n  img: string\n  quote: string\n  name: string\n  role: string\n}\n\nexport default function FancyTestimonialsSlider({\n  testimonials,\n  autorotateTiming = 7000,\n}: {\n  testimonials: Testimonial[]\n  autorotateTiming?: number\n}) {\n  const testimonialsRef = useRef<HTMLDivElement>(null)\n  const [active, setActive] = useState<number>(0)\n  const [autorotate, setAutorotate] = useState<boolean>(true)\n\n  useEffect(() => {\n    if (!autorotate) return\n    const interval = setInterval(() => {\n      setActive(active + 1 === testimonials.length ? 0 : (active) => active + 1)\n    }, autorotateTiming)\n    return () => clearInterval(interval)\n  }, [active, autorotate])\n\n  const heightFix = () => {\n    if (testimonialsRef.current && testimonialsRef.current.parentElement)\n      testimonialsRef.current.parentElement.style.height = `${testimonialsRef.current.clientHeight}px`\n  }\n\n  useEffect(() => {\n    heightFix()\n  }, [])\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl px-4 text-center sm:px-6\">\n      {/* Testimonial image */}\n      <div className=\"relative h-24 sm:h-32\">\n        <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]\">\n          <div className=\"h-24 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_20%,theme(colors.white))] sm:h-32\">\n            {testimonials.map((testimonial, index) => (\n              <Transition\n                as=\"div\"\n                key={index}\n                show={active === index}\n                className=\"absolute inset-0 -z-10 h-full\"\n                enter=\"transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 order-first\"\n                enterFrom=\"opacity-0 -rotate-[60deg]\"\n                enterTo=\"opacity-100 rotate-0\"\n                leave=\"transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700\"\n                leaveFrom=\"opacity-100 rotate-0\"\n                leaveTo=\"opacity-0 rotate-[60deg]\"\n                beforeEnter={() => heightFix()}\n              >\n                <Image\n                  className=\"relative top-8 left-1/2 -translate-x-1/2 rounded-full sm:top-11\"\n                  src={testimonial.img}\n                  width={48}\n                  height={48}\n                  alt={testimonial.name}\n                />\n              </Transition>\n            ))}\n          </div>\n        </div>\n      </div>\n      {/* Text */}\n      <div className=\"mb-6 transition-all delay-300 duration-150 ease-in-out sm:mb-9\">\n        <div className=\"relative flex flex-col\" ref={testimonialsRef}>\n          {testimonials.map((testimonial, index) => (\n            <Transition\n              key={index}\n              show={active === index}\n              enter=\"transition ease-in-out duration-500 delay-200 order-first\"\n              enterFrom=\"opacity-0 -translate-x-4\"\n              enterTo=\"opacity-100 translate-x-0\"\n              leave=\"transition ease-out duration-300 delay-300 absolute\"\n              leaveFrom=\"opacity-100 translate-x-0\"\n              leaveTo=\"opacity-0 translate-x-4\"\n              beforeEnter={() => heightFix()}\n            >\n              <div className=\"px-2 text-lg font-bold text-cyan-900 before:content-['\\201C'] after:content-['\\201D'] sm:px-0 sm:text-xl lg:text-2xl\">\n                {testimonial.quote}\n              </div>\n            </Transition>\n          ))}\n        </div>\n      </div>\n      {/* Buttons */}\n      <div className=\"-m-1 flex flex-wrap justify-center gap-1 sm:gap-1.5\">\n        {testimonials.map((testimonial, index) => (\n          <button\n            key={index}\n            className={`m-1 inline-flex justify-center rounded-full px-2 py-1 text-xs whitespace-nowrap shadow-sm transition-colors duration-150 focus-visible:ring focus-visible:ring-cyan-300 focus-visible:outline-none sm:px-3 sm:py-1.5 sm:text-xs dark:focus-visible:ring-cyan-600 ${active === index ? \"bg-cyan-500 text-white shadow-cyan-950/10\" : \"bg-white text-cyan-900 hover:bg-cyan-100\"}`}\n            onClick={() => {\n              setActive(index)\n              setAutorotate(false)\n            }}\n          >\n            <span className=\"truncate\">{testimonial.name}</span>{\" \"}\n            <span\n              className={`${active === index ? \"text-cyan-200\" : \"text-cyan-300\"}`}\n            >\n              -\n            </span>{\" \"}\n            <span className=\"truncate\">{testimonial.role}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}