37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
interface SecondaryButtonProps {
|
||
|
|
text: string;
|
||
|
|
targetId: string; // ← NEW: pass the section ID
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SecondaryButton: React.FC<SecondaryButtonProps> = ({
|
||
|
|
text,
|
||
|
|
targetId,
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const handleScroll = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||
|
|
e.preventDefault();
|
||
|
|
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={`/#${targetId}`} // ← valid internal hash link
|
||
|
|
onClick={handleScroll}
|
||
|
|
className={`font-mium-reg text-b-2-17 h-[52px] w-max min-w-40 cursor-pointer rounded-full border border-white bg-transparent px-6 py-3 text-center font-normal tracking-[-0.8px] text-white hover:border-white/80 hover:bg-white/10 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${className} `.trim()}
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SecondaryButton;
|