91ff17e8b7
Adds a new `AnimatedLink` component that provides a smooth hover animation effect to links. This component is then used in the `BlogArea` component to enhance the appearance of the blog post links. The changes include: - Creating a new `AnimatedLink` component in `animatedLink.tsx` - Updating the `BlogArea` component in `blogpost.tsx` to use the new `AnimatedLink` component instead of the default `Link` component from Next.js.
22 lines
608 B
TypeScript
22 lines
608 B
TypeScript
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
interface AnimatedLinkProps {
|
|
href: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const AnimatedLink = ({ href, children, className = '' }: AnimatedLinkProps) => {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`group relative text-white hover:text-white ${className}`}
|
|
>
|
|
{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>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default AnimatedLink; |