Update src/components/button/useButtonClick.ts

src/components/button/useButtonClick.ts

@@ -1,74 +1,58 @@
-"use client";
+import { useRouter } from "next/navigation";
 
-import { useLenis } from "lenis/react";
-import { useRouter, usePathname } from "next/navigation";
-import { useEffect } from "react";
-
-export const useButtonClick = (
-  href?: string,
-  onClick?: () => void,
-  scrollToSection?: boolean
-) => {
-  const lenis = useLenis();
+export const useButtonClick = () => {
   const router = useRouter();
-  const pathname = usePathname();
 
-  const scrollToElement = (sectionId: string, delay: number = 100) => {
-    setTimeout(() => {
-      if (lenis) {
-        lenis.scrollTo(`#${sectionId}`, { offset: 0 });
-      } else {
-        const element = document.getElementById(sectionId);
-        if (element) {
-          element.scrollIntoView({ behavior: "smooth", block: "start" });
-        }
+  const handleClick = (
+    href?: string,
+    onClick?: () => void,
+    newTab?: boolean
+  ) => {
+    return (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+      if (href) {
+        // Prevent default behavior if an href is provided, as we will handle navigation manually
+        // This is crucial for hash links and internal Next.js navigation
+        event.preventDefault();
       }
-    }, delay);
-  };
 
-  const handleClick = () => {
-    if (href) {
-      const isExternalLink = /^(https?:\/\/|www\.)/.test(href);
+      if (onClick) {
+        onClick();
+      }
 
-      if (isExternalLink) {
-        window.open(
-          href.startsWith("www.") ? `https://${href}` : href,
-          "_blank",
-          "noopener,noreferrer"
-        );
-      } else if (href.startsWith("/")) {
-        const [path, hash] = href.split("#");
-
-        if (path !== pathname) {
-          router.push(path);
-          if (hash) {
-            setTimeout(() => {
-              window.location.hash = hash;
-              scrollToElement(hash, 100);
-            }, 100);
+      if (href) {
+        if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:")) {
+          // External link, mailto, or tel
+          if (newTab) {
+            window.open(href, "_blank", "noopener,noreferrer");
+          } else {
+            window.location.href = href;
+          }
+        } else if (href.startsWith("#")) {
+          // Scroll to section for hash links
+          const targetId = href.substring(1);
+          // Use getElementById for robust targeting of elements by ID
+          const targetElement = document.getElementById(targetId);
+          if (targetElement) {
+            targetElement.scrollIntoView({
+              behavior: "smooth"});
+            // Optionally update URL hash without a full page reload for better UX
+            window.history.pushState(null, "", href);
+          } else if (targetId === '') {
+            // Handle `href="#"` to scroll to top (or do nothing if preferred for placeholder)
+            window.scrollTo({
+              top: 0,
+              behavior: "smooth"});
+            window.history.pushState(null, '', '/'); // Clear hash
+          } else {
+            console.warn(`Element with ID "${targetId}" not found for smooth scroll.`);
           }
         } else {
-          if (hash) {
-            window.location.hash = hash;
-            scrollToElement(hash, 50);
-          } else if (scrollToSection) {
-            const sectionId = path.replace(/^\//, "").replace(/\//g, "-");
-            scrollToElement(sectionId, 50);
-          }
+          // Internal page navigation using Next.js router
+          router.push(href);
         }
-      } else {
-        scrollToElement(href, 50);
       }
-    }
-    onClick?.();
+    };
   };
 
-  useEffect(() => {
-    if (typeof window !== "undefined" && window.location.hash) {
-      const hash = window.location.hash.replace("#", "");
-      scrollToElement(hash, 300);
-    }
-  }, [pathname]);
-
   return handleClick;
 };