src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx

@@ -1,74 +1,49 @@
-"use client";
+import React, { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import { ButtonProps } from "@/components/button/button.types";
 
-import { useRef, memo } from "react";
-import { useCharAnimation } from "../useCharAnimation";
-import { useButtonClick } from "../useButtonClick";
-import { cls } from "@/lib/utils";
-import "./BounceButton.css";
+export const ButtonBounceEffect = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      text,
+      onClick,
+      href,
+      className,
+      bgClassName,
+      textClassName,
+      iconClassName,
+      disabled = false,
+      ariaLabel,
+      type = "button",      newTab,
+      ...props
+    },
+    ref
+  ) => {
+    const clickHandler = useButtonClick(href, onClick, newTab);
 
-interface ButtonBounceEffectProps {
-  text: string;
-  onClick?: () => void;
-  href?: string;
-  className?: string;
-  bgClassName?: string;
-  textClassName?: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-  type?: "button" | "submit" | "reset";
-  scrollToSection?: boolean;
-}
-
-const ButtonBounceEffect = ({
-  text,
-  onClick,
-  href,
-  className = "",
-  bgClassName = "",
-  textClassName = "",
-  disabled = false,
-  ariaLabel,
-  type = "button",
-  scrollToSection,
-}: ButtonBounceEffectProps) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const handleClick = useButtonClick(href, onClick, scrollToSection);
-
-  useCharAnimation(buttonRef, text);
-
-  return (
-    <button
-      ref={buttonRef}
-      type={type}
-      onClick={handleClick}
-      data-href={href}
-      disabled={disabled}
-      aria-label={ariaLabel || text}
-      className={cls(
-        "bounce-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-    >
-      <div
-        className={cls(
-          "bounce-button-bg absolute! inset-0 rounded-theme primary-button",
-          bgClassName
-        )}
-      ></div>
-      <span
-        data-button-animate-chars=""
-        className={cls(
-          "bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
-          textClassName
+    return (
+      <button
+        className={cn(
+          "group relative flex h-12 w-full items-center justify-center rounded-lg bg-primary-cta p-3 text-sm font-medium text-primary-cta-foreground transition-all duration-300 ease-out active:scale-95",          className
         )}
+        onClick={clickHandler}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        type={type}
+        ref={ref}
+        {...props}
       >
-        {text}
-      </span>
-    </button>
-  );
-};
+        <span
+          className={cn(
+            "relative flex items-center gap-2 translate-y-0 group-hover:-translate-y-1 group-active:translate-y-0 transition-transform duration-300 ease-out",            textClassName
+          )}
+        >
+          {text}
+        </span>
+      </button>
+    );
+  }
+);
 
 ButtonBounceEffect.displayName = "ButtonBounceEffect";
-
-export default memo(ButtonBounceEffect);

src/components/button/useButtonClick.ts

@@ -1,58 +1,54 @@
 import { useRouter } from "next/navigation";
+import React from "react";
 
-export const useButtonClick = () => {
+export const useButtonClick = (
+  href?: string,
+  onClickProp?: () => void,
+  newTab?: boolean
+) => {
   const router = useRouter();
 
-  const handleClick = (
-    href?: string,
-    onClick?: () => void,
-    newTab?: boolean
-  ) => {
-    return (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+  const handleClick = React.useCallback(
+    (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();
       }
 
-      if (onClick) {
-        onClick();
+      if (onClickProp) {
+        onClickProp();
       }
 
       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
+              behavior: "smooth"
+            });
             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
+              behavior: "smooth"
+            });
+            window.history.pushState(null, '', '/');
           } else {
             console.warn(`Element with ID "${targetId}" not found for smooth scroll.`);
           }
         } else {
-          // Internal page navigation using Next.js router
           router.push(href);
         }
       }
-    };
-  };
+    },
+    [router, href, onClickProp, newTab]
+  );
 
   return handleClick;
 };