"use client"; import { motion, useSpring } from "motion/react"; import React, { useState, MouseEvent, useRef } from "react"; import { ChevronRightIcon } from "lucide-react"; interface ImageItem { img: string; label: string; } function ImageReveal({ list }: { list: ImageItem[] }) { const [img, setImg] = useState<{ src: string; alt: string; opacity: number }>({ src: "", alt: "", opacity: 0 }); const imageRef = useRef(null); const containerRef = useRef(null); const spring = { stiffness: 150, damping: 15, mass: 0.1 }; const imagePos = { x: useSpring(0, spring), y: useSpring(0, spring) }; const handleMove = (e: MouseEvent) => { if (!imageRef.current || !containerRef.current) return; const containerRect = containerRef.current.getBoundingClientRect(); const { clientX, clientY } = e; const relativeX = clientX - containerRect.left; const relativeY = clientY - containerRect.top; imagePos.x.set(relativeX - imageRef.current.offsetWidth / 2); imagePos.y.set(relativeY - imageRef.current.offsetHeight / 2); }; const handleImageInteraction = (item: ImageItem, opacity: number) => { setImg({ src: item.img, alt: item.label, opacity }); }; return (

{list.map((item) => (

handleImageInteraction(item, 1)} onMouseMove={() => handleImageInteraction(item, 1)} onMouseLeave={() => handleImageInteraction(item, 0)} className="flex w-full cursor-pointer justify-between border-b py-6 transition-opacity hover:opacity-40">

{item.label}

))}

); } export default ImageReveal;