Update src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx

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);