"use client"; import { IconArrowNarrowRight } from "@tabler/icons-react"; import { useState, useRef, useId, useEffect } from "react"; interface SlideData { title: string; button: string; src: string; } interface SlideProps { slide: SlideData; index: number; current: number; handleSlideClick: (index: number) => void; } const Slide = ({ slide, index, current, handleSlideClick }: SlideProps) => { const slideRef = useRef(null); const xRef = useRef(0); const yRef = useRef(0); const frameRef = useRef(); useEffect(() => { const animate = () => { if (!slideRef.current) return; const x = xRef.current; const y = yRef.current; slideRef.current.style.setProperty("--x", `${x}px`); slideRef.current.style.setProperty("--y", `${y}px`); frameRef.current = requestAnimationFrame(animate); }; frameRef.current = requestAnimationFrame(animate); return () => { if (frameRef.current) { cancelAnimationFrame(frameRef.current); } }; }, []); const handleMouseMove = (event: React.MouseEvent) => { const el = slideRef.current; if (!el) return; const r = el.getBoundingClientRect(); xRef.current = event.clientX - (r.left + Math.floor(r.width / 2)); yRef.current = event.clientY - (r.top + Math.floor(r.height / 2)); }; const handleMouseLeave = () => { xRef.current = 0; yRef.current = 0; }; const imageLoaded = (event: React.SyntheticEvent) => { event.currentTarget.style.opacity = "1"; }; const { src, button, title } = slide; return (

handleSlideClick(index)} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} style={{ transform: current !== index ? "scale(0.98) rotateX(8deg)" : "scale(1) rotateX(0deg)", transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)", transformOrigin: "bottom", }} >

{current === index && (

)}

{title}

); }; interface CarouselControlProps { type: string; title: string; handleClick: () => void; } const CarouselControl = ({ type, title, handleClick, }: CarouselControlProps) => { return ( ); }; interface CarouselProps { slides: SlideData[]; } export default function Carousel({ slides }: CarouselProps) { const [current, setCurrent] = useState(0); const handlePreviousClick = () => { const previous = current - 1; setCurrent(previous < 0 ? slides.length - 1 : previous); }; const handleNextClick = () => { const next = current + 1; setCurrent(next === slides.length ? 0 : next); }; const handleSlideClick = (index: number) => { if (current !== index) { setCurrent(index); } }; const id = useId(); return (

))}

); }

Carousel

Instalação

Dependências