🌈 style: correct colors for dark theme
This commit is contained in:
@@ -5,16 +5,26 @@ interface AnimatedLinkProps {
|
|||||||
href: string;
|
href: string;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
underlineColor?: string;
|
||||||
|
textColor?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AnimatedLink = ({ href, children, className = '' }: AnimatedLinkProps) => {
|
const AnimatedLink = ({
|
||||||
|
href,
|
||||||
|
children,
|
||||||
|
className = '',
|
||||||
|
underlineColor = 'bg-black dark:bg-white',
|
||||||
|
textColor = 'text-black dark:text-white'
|
||||||
|
}: AnimatedLinkProps) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={href}
|
href={href}
|
||||||
className={`group relative text-white hover:text-white ${className}`}
|
className={`group relative ${textColor} transition-colors duration-300 ${className}`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
<span className="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
|
<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>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user