This CustomLink component creates animated links that display the link text twice. When hovered, the text moves upwards with a smooth transition effect. Below is a breakdown of how the component works and how it can be used.

CustomLink Component Code

import Link from 'next/link';
import React from 'react';

type Props = {
label: string;
href: string;
}

export default function CustomLink({ label, href }: Props) {
return (
  <Link href={href}>
      {/* link container */ }
      <div className='group h-[40px] p-2 overflow-hidden'>
          {/* labels container */}
          <div className='flex flex-col items-center justify-center group-hover:-translate-y-10 transition duration-700'>
              <span className='text-2xl font-semibold'>{label}</span>
              <span className='text-2xl font-semibold'>{label}</span>
          </div>
      </div>
  </Link>
)
}

• <Link> Component: The Link component from Next.js is used to create client-side navigation. The href prop defines the destination URL.
• group class: Tailwind's group class is used to target child elements for hover states. This allows you to apply hover styles to child elements when the parent is hovered.
• Text movement on hover: Inside the link container, there are two span elements that both display the same label text. The group-hover:-translate-y-10 class is used to move the text upwards when the parent group is hovered, creating a sliding effect. The transition duration-700 class ensures the movement happens smoothly over 700 milliseconds.
• Overflow hidden: The overflow-hidden class ensures that any content that moves outside the boundaries of the container (due to the translate-y property) is hidden.

How to Use CustomLink

Here’s how you can use the CustomLink component in your layout:

export default function Page() {
return (
  <div className="h-screen w-full flex items-center justify-center">
      <CustomLink href="/" label="Home" />
      <CustomLink href="/" label="Project" />
      <CustomLink href="/" label="Work" />
      <CustomLink href="/" label="Contact Me" />
  </div>
)
}

Happy Coding 👋