52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface SmoothScrollLinkProps {
|
||
|
|
href: string;
|
||
|
|
children: React.ReactNode;
|
||
|
|
scrolled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SmoothScrollLink = ({
|
||
|
|
href,
|
||
|
|
children,
|
||
|
|
scrolled = false,
|
||
|
|
}: SmoothScrollLinkProps) => {
|
||
|
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const targetId = href.replace("#", "");
|
||
|
|
const section = document.getElementById(targetId);
|
||
|
|
if (section) {
|
||
|
|
const yOffset = -80;
|
||
|
|
const y =
|
||
|
|
section.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
||
|
|
window.scrollTo({ top: y, behavior: "smooth" });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={href}
|
||
|
|
onClick={handleClick}
|
||
|
|
className={cn(
|
||
|
|
"font-mium-reg text-b-2-17 group relative inline-block h-full cursor-pointer font-medium tracking-[-0.8px] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)]",
|
||
|
|
scrolled ? "text-black" : "text-white"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{/* Smooth hover text animation */}
|
||
|
|
<span className="relative block overflow-hidden">
|
||
|
|
<span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
<span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SmoothScrollLink;
|