{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-hover",
  "type": "registry:block",
  "title": "Link hover",
  "description": "Link hover",
  "files": [
    {
      "path": "components/usages/linkhoverusage.tsx",
      "content": "import LinkHover from \"@/registry/open-source/link-hover\";\n\nconst items = [\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"Home\",\n    },\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"Blog\",\n    },\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"About\",\n    },\n];\nexport default function LinkHoverUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <LinkHover items={items} />\n        </div>\n    );\n}",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/linkhoverusage.tsx",
      "content": "import LinkHover from \"@/registry/open-source/link-hover\";\n\nconst items = [\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"Home\",\n    },\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"Blog\",\n    },\n    {\n        imgUrl: \"/itjustworks.jpg\",\n        title: \"About\",\n    },\n];\nexport default function LinkHoverUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <LinkHover items={items} />\n        </div>\n    );\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/link-hover.tsx",
      "content": "'use client'\n\n/**\n * @author: @codegrid\n * @description: Link Hover Effect with GSAP\n * @version: 1.0.0\n * @date: 2026-02-16\n * @license: MIT\n * @website: https://emerald-ui.com\n */\nimport { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\n\nconst DefaultImg =\n    '/itjustworks.jpg'\n\nconst DefaultItems: Item[] = [\n    {\n        imgUrl:\n            '/itjustworks.jpg',\n        title: 'Home',\n    },\n    {\n        imgUrl:\n            '/itjustworks.jpg',\n        title: 'Blog',\n    },\n    {\n        imgUrl:\n            '/itjustworks.jpg',\n        title: 'About',\n    },\n    {\n        imgUrl:\n            '/itjustworks.jpg',\n        title: 'Projects',\n    },\n    {\n        imgUrl:\n            '/itjustworks.jpg',\n        title: 'Contacts',\n    },\n]\n\ntype Item = {\n    imgUrl: string\n    title: string\n}\n\ninterface Props {\n    items: Item[]\n}\n\nexport default function ImageHover({ items = DefaultItems }: Props) {\n    const sectionRef = useRef<HTMLElement>(null)\n    const previewContainerRef = useRef<HTMLDivElement>(null)\n    const newImgRef = useRef<HTMLDivElement>(null)\n\n    useGSAP(\n        () => {\n            if (!sectionRef.current) return\n            const previewContainer = previewContainerRef.current\n            const menuLinkItems =\n                sectionRef.current.querySelectorAll('.menu-link-item')\n\n            let lastHoveredIndex: number | null = null\n\n            const handleMouseOver = (index: number) => {\n                if (index !== lastHoveredIndex) {\n                    const imgContainer = document.createElement('div')\n                    imgContainer.classList.add(\n                        'temp-image',\n                        'absolute',\n                        'rotate-[-30deg]',\n                        '-left-1/2',\n                        'top-[125%]'\n                    )\n                    const img = document.createElement('img')\n                    img.src = items[index].imgUrl\n                    img.alt = ''\n                    img.classList.add('w-full', 'h-full', 'object-fill')\n                    imgContainer.appendChild(img)\n                    previewContainer!.appendChild(imgContainer)\n\n                    gsap.to(imgContainer, {\n                        top: '0%',\n                        left: '0%',\n                        rotate: 0,\n                        duration: 1.25,\n                        ease: 'power3.out',\n                        // clean up dom function\n                        onComplete: () => {\n                            gsap.delayedCall(2, () => {\n                                const allImgContainers =\n                                    previewContainer!.querySelectorAll('.temp-image')\n\n                                if (allImgContainers.length > 1) {\n                                    Array.from(allImgContainers)\n                                        .slice(0, -1)\n                                        .forEach((container) => {\n                                            setTimeout(() => {\n                                                container.remove()\n                                            }, 2000)\n                                        })\n                                }\n                            })\n                        },\n                    })\n\n                    lastHoveredIndex = index\n                }\n            }\n\n            menuLinkItems.forEach((item, index) => {\n                item.addEventListener('mouseover', () => handleMouseOver(index))\n            })\n\n            return () => {\n                menuLinkItems.forEach((item, index) => {\n                    item.removeEventListener('mouseover', () => handleMouseOver(index))\n                })\n            }\n        },\n        { scope: sectionRef, dependencies: [sectionRef] }\n    )\n\n    return (\n        <section\n            ref={sectionRef}\n            className='flex h-full w-full items-center gap-16 p-20 max-md:p-5'\n        >\n            <div className='flex-1'>\n                <ul className='text-muted-foreground [&>li:hover]:text-foreground flex flex-1 flex-col gap-6 text-5xl font-medium max-md:gap-2 max-md:text-3xl [&>li]:transition'>\n                    {items.map(({ title }) => (\n                        <li key={title} className='menu-link-item'>\n                            {title}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n            <div\n                ref={previewContainerRef}\n                className='left-1/2 max-w-90 min-w-48 flex-2 rotate-15 [clip-path:polygon(0_0,100%_0,100%_100%,0%_100%)] max-md:max-w-64'\n            >\n                <img src={DefaultImg} className='h-full w-full object-fill' alt='' />\n\n                <div\n                    ref={newImgRef}\n                    className='absolute top-[125%] -left-1/2 h-full w-full rotate-[-30deg]'\n                >\n                    <img\n                        src={items[1].imgUrl}\n                        className='h-full w-full object-fill'\n                        alt=''\n                    />\n                </div>\n            </div>\n        </section>\n    )\n}",
      "type": "registry:ui"
    }
  ]
}