carousel

1"use client";
2import { IconArrowNarrowRight } from "@tabler/icons-react";
3import { useState, useRef, useId, useEffect } from "react";
4 
5interface SlideData {
6  title: string;
7  button: string;
8  src: string;
9}
10 
11interface SlideProps {
12  slide: SlideData;
13  index: number;
14  current: number;
15  handleSlideClick: (index: number) => void;
16}
17 
18const Slide = ({ slide, index, current, handleSlideClick }: SlideProps) => {
19  const slideRef = useRef<HTMLLIElement>(null);
20 
21  const xRef = useRef(0);
22  const yRef = useRef(0);
23  const frameRef = useRef<number>();
24 
25  useEffect(() => {
26    const animate = () => {
27      if (!slideRef.current) return;
28 
29      const x = xRef.current;
30      const y = yRef.current;
31 
32      slideRef.current.style.setProperty("--x", `${x}px`);
33      slideRef.current.style.setProperty("--y", `${y}px`);
34 
35      frameRef.current = requestAnimationFrame(animate);
36    };
37 
38    frameRef.current = requestAnimationFrame(animate);
39 
40    return () => {
41      if (frameRef.current) {
42        cancelAnimationFrame(frameRef.current);
43      }
44    };
45  }, []);
46 
47  const handleMouseMove = (event: React.MouseEvent) => {
48    const el = slideRef.current;
49    if (!el) return;
50 
51    const r = el.getBoundingClientRect();
52    xRef.current = event.clientX - (r.left + Math.floor(r.width / 2));
53    yRef.current = event.clientY - (r.top + Math.floor(r.height / 2));
54  };
55 
56  const handleMouseLeave = () => {
57    xRef.current = 0;
58    yRef.current = 0;
59  };
60 
61  const imageLoaded = (event: React.SyntheticEvent<HTMLImageElement>) => {
62    event.currentTarget.style.opacity = "1";
63  };
64 
65  const { src, button, title } = slide;
66 
67  return (
68    <div className="[perspective:1200px] [transform-style:preserve-3d]">
69      <li
70        ref={slideRef}
71        className="flex flex-1 flex-col items-center justify-center relative text-center text-white opacity-100 transition-all duration-300 ease-in-out w-[70vmin] h-[70vmin] mx-[4vmin] z-10 "
72        onClick={() => handleSlideClick(index)}
73        onMouseMove={handleMouseMove}
74        onMouseLeave={handleMouseLeave}
75        style={{
76          transform:
77            current !== index
78              ? "scale(0.98) rotateX(8deg)"
79              : "scale(1) rotateX(0deg)",
80          transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
81          transformOrigin: "bottom",
82        }}
83      >
84        <div
85          className="absolute top-0 left-0 w-full h-full bg-[#1D1F2F] rounded-[1%] overflow-hidden transition-all duration-150 ease-out"
86          style={{
87// … truncated