76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { useButtonClick } from "./useButtonClick";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
interface ButtonSlideBackgroundProps {
|
|
text: string;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
className?: string;
|
|
textClassName?: string;
|
|
disabled?: boolean;
|
|
ariaLabel?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
scrollToSection?: boolean;
|
|
}
|
|
|
|
const ButtonSlideBackground = ({
|
|
text,
|
|
onClick,
|
|
href,
|
|
className = "",
|
|
textClassName = "",
|
|
disabled = false,
|
|
ariaLabel,
|
|
type = "button",
|
|
scrollToSection,
|
|
}: ButtonSlideBackgroundProps) => {
|
|
const handleClick = useButtonClick(href, onClick, scrollToSection);
|
|
const cubicBezier = "cubic-bezier(0.4, 0, 0, 1)";
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={handleClick}
|
|
disabled={disabled}
|
|
data-href={href}
|
|
aria-label={ariaLabel || text}
|
|
className={cls(
|
|
"group relative flex items-center justify-center h-9 min-w-0 w-fit max-w-full px-6 rounded-theme overflow-hidden cursor-pointer",
|
|
"primary-button",
|
|
"after:content-[''] after:absolute after:left-0 after:bottom-0 after:w-full after:h-full",
|
|
"after:translate-y-[101%] after:rounded-t-[50%] hover:after:translate-y-0 hover:after:rounded-none",
|
|
"after:transition-all after:duration-500",
|
|
"after:bg-background",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
className
|
|
)}
|
|
style={{
|
|
transform: "scaleX(1)",
|
|
transition: `transform 0.5s ${cubicBezier}`,
|
|
}}
|
|
>
|
|
<span
|
|
className={cls(
|
|
"inline-block text-sm overflow-hidden relative",
|
|
"text-background",
|
|
"after:content-[attr(data-text)] after:w-full after:h-full after:inline-block after:absolute",
|
|
"after:left-1/2 after:bottom-0 after:z-[1] after:-translate-x-1/2 after:translate-y-full group-hover:after:translate-y-0",
|
|
"after:transition-transform after:duration-500 after:ease-[cubic-bezier(0.2,0,0,1)]",
|
|
"after:text-foreground",
|
|
textClassName
|
|
)}
|
|
data-text={text}
|
|
>
|
|
{text}
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
ButtonSlideBackground.displayName = "ButtonSlideBackground";
|
|
|
|
export default memo(ButtonSlideBackground);
|