xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
28 lines (27 loc) • 2.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { ArrowRight } from "lucide-react";
import { cn } from '../../lib/utils.js';
export const InteractiveHoverButton = React.forwardRef(({ children, className, variant = "default", animated = true, ...props }, ref) => {
const getVariantStyles = () => {
switch (variant) {
case "primary":
return "btn-primary";
case "secondary":
return "btn-secondary";
case "success":
return "btn-success";
case "warning":
return "btn-warning";
case "error":
return "btn-destructive";
default:
return "btn-primary";
}
};
if (!animated) {
return (_jsx("button", { ref: ref, className: cn("group relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold", getVariantStyles(), className), ...props, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]" }), _jsx("span", { children: children })] }) }));
}
return (_jsxs("button", { ref: ref, className: cn("group relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold", getVariantStyles(), className), ...props, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]" }), _jsx("span", { className: "inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0", children: children })] }), _jsxs("div", { className: "absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100", children: [_jsx("span", { children: children }), _jsx(ArrowRight, {})] })] }));
});
InteractiveHoverButton.displayName = "InteractiveHoverButton";