"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT"; export function HoverBorderGradient({ children, containerClassName, className, as: Tag = "button", duration = 1, 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", "LEFT", "BOTTOM", "RIGHT"]; const currentIndex = directions.indexOf(currentDirection); const nextIndex = clockwise ? (currentIndex - 1 + directions.length) % directions.length : (currentIndex + 1) % directions.length; return directions[nextIndex]; }; const movingMap: Record = { TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", BOTTOM: "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", RIGHT: "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", }; const highlight = "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)"; useEffect(() => { if (!hovered) { const interval = setInterval(() => { setDirection((prevState) => rotateDirection(prevState)); }, duration * 1000); return () => clearInterval(interval); } }, [hovered]); return ( ) => { setHovered(true); }} onMouseLeave={() => setHovered(false)} className={cn( "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit", containerClassName )} {...props} >

{children}

); }

Hover Border Gradient

Instalação

Dependências