32 lines
799 B
TypeScript
32 lines
799 B
TypeScript
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
interface AnimatedLinkProps {
|
|
href: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
underlineColor?: string;
|
|
textColor?: string;
|
|
}
|
|
|
|
const AnimatedLink = ({
|
|
href,
|
|
children,
|
|
className = '',
|
|
underlineColor = 'bg-black dark:bg-white',
|
|
textColor = 'text-black dark:text-white'
|
|
}: AnimatedLinkProps) => {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`group relative ${textColor} transition-colors duration-300 ${className}`}
|
|
>
|
|
{children}
|
|
<span
|
|
className={`absolute bottom-0 left-0 w-full h-0.5 ${underlineColor} transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100`}
|
|
></span>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default AnimatedLink; |