racinfo/src/components/HoverLink.tsx
2025-06-23 21:47:24 +03:00

27 lines
881 B
TypeScript

import { cn } from "@/lib/utils";
import Link from "next/link";
type HoverTextProps = {
children: React.ReactNode;
href: string;
className?: string;
};
export default function HoverLink({
children,
href,
className = "",
}: HoverTextProps) {
return (
<Link
href={href}
className={cn(
"relative hover:text-stone-50 cursor-pointer transition-all ease-in-out before:transition-[width] before:ease-in-out before:duration-300 before:absolute before:bg-neutral-50 before:origin-center before:h-[1px] before:w-0 hover:before:w-[50%] before:bottom-0 before:left-[50%] after:transition-[width] after:ease-in-out after:duration-300 after:absolute after:bg-neutral-50 after:origin-center after:h-[1px] after:w-0 hover:after:w-[50%] after:bottom-0 after:right-[50%]",
className,
)}
>
<span>{children}</span>
</Link>
);
}