hover-img

1"use client";
2 
3import React, { useRef, useEffect } from "react";
4import gsap from "gsap";
5import "./hover-img.css";
6 
7interface ProjectItem {
8    title: string;
9    label: string;
10    imageSrc: string;
11}
12 
13const defaultProjects: ProjectItem[] = [
14    {
15        title: "Shree Krishna",
16        label: "The Supreme Personality of Godhead",
17        imageSrc: "/hover-img/image-1.jpg",
18    },
19    {
20        title: "Radha Krishna",
21        label: "The Divine Couple",
22        imageSrc: "/hover-img/image-2.jpg",
23    },
24    {
25        title: "Divine Love",
26        label: "Eternal Bond",
27        imageSrc: "/hover-img/image-3.jpg",
28    },
29];
30 
31interface HoverImgProps {
32    projects?: ProjectItem[];
33    className?: string;
34    isContained?: boolean; // New prop for grid previews
35    compact?: boolean; // New prop for compact layout
36}
37 
38export function HoverImg({ projects = defaultProjects, className, isContained = false, compact = false }: HoverImgProps) {
39    const containerRef = useRef<HTMLDivElement>(null);
40    const thumbnailRef = useRef<HTMLDivElement>(null);
41    const xToRef = useRef<gsap.QuickToFunc | null>(null);
42    const yToRef = useRef<gsap.QuickToFunc | null>(null);
43 
44    useEffect(() => {
45        const projectThumbnail = thumbnailRef.current;
46        const projectsContainer = containerRef.current?.querySelector(
47            ".hover-img-projects"
48        ) as HTMLElement | null;
49 
50        if (!projectThumbnail || !projectsContainer) return;
51 
52        const projectElements = gsap.utils.toArray(
53            ".hover-img-project",
54            projectsContainer
55        ) as HTMLElement[];
56        const thumbnails = gsap.utils.toArray(
57            ".hover-img-thumbnail",
58            projectThumbnail
59        ) as HTMLElement[];
60 
61        gsap.set(projectThumbnail, { scale: 0, xPercent: -50, yPercent: -50 });
62 
63        xToRef.current = gsap.quickTo(projectThumbnail, "x", {
64            duration: 0.4,
65            ease: "power3.out",
66        });
67        yToRef.current = gsap.quickTo(projectThumbnail, "y", {
68            duration: 0.4,
69            ease: "power3.out",
70        });
71 
72        const handleMouseMove = (e: MouseEvent) => {
73            let x = e.clientX;
74            let y = e.clientY;
75 
76            if (isContained && containerRef.current) {
77                const rect = containerRef.current.getBoundingClientRect();
78                x = e.clientX - rect.left;
79                y = e.clientY - rect.top;
80            }
81 
82            xToRef.current?.(x);
83// … truncated