Initial commit

src/components/button/ButtonHoverBubble.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { memo } from "react";
+import { ArrowDownRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonHoverBubbleProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonHoverBubble = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  iconClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonHoverBubbleProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative group flex justify-center items-center min-w-0 w-fit max-w-full rounded-theme cursor-pointer pointer-events-auto outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme relative",
+          "scale-0 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-left md:group-hover:scale-100",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 px-4 min-w-0 w-fit max-w-full rounded-theme relative",
+          "-translate-x-[var(--height-9)] md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:group-hover:translate-x-0",
+          bgClassName
+        )}
+      >
+        <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme absolute right-0 z-20",
+          "scale-100 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-right md:group-hover:scale-0",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+    </button>
+  );
+};
+
+ButtonHoverBubble.displayName = "ButtonHoverBubble";
+
+export default memo(ButtonHoverBubble);