"use client"; import { useState } from "react"; interface HoverImageGalleryProps { images?: string[]; } export function HoverImageGallery({ images = [ "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-copy/andy-warhol-screenprint-marilyn-30-for-sale-not-ours-550x547.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-fs30/warholmarilynfs30-548x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-8/andy-warhol-screenprint-marilyn-monroe-for-sale-use-548x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-3/warhol-screenprint-marilyn-monroe-marilyn-1967-for-sale-543x550.jpg", "https://images.masterworksfineart.com/warhol-screenprint-marilyn-monroe-marilyn-1967-for-sale-3-550x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-5/andy-warhol-screenprint-warhol-marilyn-monroe-for-sale-550x550.jpeg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-4/warhol-screenprint-marilyn-monroe-marilyn-1967-for-sale-550x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-10/marilyn-28-550x527.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-9/warhol-screenprint-marilyn-monroe-marilyn-1967-fs-22-for-sale-550x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-1-2/andy-warhol-screenprint-marilyn-monroe-marilyn-1967-for-sale-2-547x550.jpg", "https://images.masterworksfineart.com/product/marilyn-monroe-marilyn-1967-12/warholmary1-1-547x550.jpg" ], }: HoverImageGalleryProps) { const [currentImageIndex, setCurrentImageIndex] = useState(0); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const [isHovering, setIsHovering] = useState(false); const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const width = rect.width; // Update mouse position for tooltip setMousePosition({ x, y }); // Calculate which image to show based on horizontal position const imageIndex = Math.floor((x / width) * images.length); const clampedIndex = Math.max(0, Math.min(images.length - 1, imageIndex)); setCurrentImageIndex(clampedIndex); }; const handleMouseEnter = () => { setIsHovering(true); }; const handleMouseLeave = () => { setIsHovering(false); }; return (

{/* Main displayed image */} {`Gallery

{/* Glassmorphic Tooltip with Both Chevrons */} {isHovering && (

{/* Left Chevron */} {/* Right Chevron */}

)}

); }