"use client" import type React from "react" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT" export function HoverBorderGradient({ children, containerClassName, className, as: Tag = "button", duration = 2, clockwise = true, ...props }: React.PropsWithChildren<{ as?: React.ElementType containerClassName?: string className?: string duration?: number clockwise?: boolean } & React.HTMLAttributes >) { const [hovered, setHovered] = useState(false) const [direction, setDirection] = useState("TOP") const rotateDirection = (currentDirection: Direction): Direction => { const directions: Direction[] = ["TOP", "RIGHT", "BOTTOM", "LEFT"] const currentIndex = directions.indexOf(currentDirection) const nextIndex = clockwise ? (currentIndex + 1) % directions.length : (currentIndex - 1 + directions.length) % directions.length return directions[nextIndex] } // Enhanced gradient maps matching the nav gradient const movingMap: Record = { TOP: "radial-gradient(60% 150% at 50% 0%, rgba(37, 99, 235, 0.5) 0%, rgba(147, 51, 234, 0.3) 50%, rgba(239, 68, 68, 0.4) 100%)", RIGHT: "radial-gradient(150% 60% at 100% 50%, rgba(37, 99, 235, 0.5) 0%, rgba(147, 51, 234, 0.3) 50%, rgba(239, 68, 68, 0.4) 100%)", BOTTOM: "radial-gradient(60% 150% at 50% 100%, rgba(37, 99, 235, 0.5) 0%, rgba(147, 51, 234, 0.3) 50%, rgba(239, 68, 68, 0.4) 100%)", LEFT: "radial-gradient(150% 60% at 0% 50%, rgba(37, 99, 235, 0.5) 0%, rgba(147, 51, 234, 0.3) 50%, rgba(239, 68, 68, 0.4) 100%)" } // Hover highlight gradient const highlight = "radial-gradient(100% 200% at 50% 50%, rgba(37, 99, 235, 0.7) 0%, rgba(147, 51, 234, 0.5) 50%, rgba(239, 68, 68, 0.6) 100%)" useEffect(() => { if (!hovered) { const interval = setInterval(() => { setDirection((prevState) => rotateDirection(prevState)) }, duration * 250) // Faster rotation for smoother animation return () => clearInterval(interval) } }, [hovered, duration]) return ( setHovered(true)} onMouseLeave={() => setHovered(false)} className={cn( "relative flex rounded-full content-center transition duration-500 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-[2px] decoration-clone w-fit hover:scale-[1.02]", containerClassName )} {...props} >
{children}
{/* Primary glow layer */} {/* Secondary glow layer for depth */} {/* Inner blur layer */}
) }