mirror of https://github.com/sgoudham/website.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
832 B
TypeScript
31 lines
832 B
TypeScript
import Link from "next/link";
|
|
|
|
export const Links = () => {
|
|
return (
|
|
<>
|
|
<LinkWithAnimatedUnderline href="/" text="< Home />" />
|
|
<LinkWithAnimatedUnderline href="/projects" text="< Projects />" />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const LinkWithAnimatedUnderline = ({
|
|
href,
|
|
text,
|
|
}: {
|
|
href: string;
|
|
text: string;
|
|
}) => {
|
|
const animatedUnderline =
|
|
"md:block md:max-w-0 md:group-hover:max-w-full motion-safe:md:transition-all md:h-0.5 md:bg-blue motion-safe:md:duration-300";
|
|
|
|
return (
|
|
<Link href={href} className="motion-safe:md:transition motion-safe:md:duration-300 group focus:text-blue">
|
|
<span className="group-hover:text-blue motion-safe:md:transition-all motion-safe:md:duration-300">
|
|
{text}
|
|
</span>
|
|
<span className={`${animatedUnderline}`}></span>
|
|
</Link>
|
|
);
|
|
};
|