xlibs-components/dist/components/magicui/animated-subscribe-button.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { motion, AnimatePresence } from "motion/react";
export const AnimatedSubscribeButton = React.forwardRef(({ children, className = "", variant = "default", size = "md", action = "subscribe", onAction, ...props }, ref) => {
    const [isSubscribed, setIsSubscribed] = React.useState(false);
    const handleClick = () => {
        setIsSubscribed(!isSubscribed);
        onAction?.(action);
    };
    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";
        }
    };
    const getSizeStyles = () => {
        switch (size) {
            case "sm":
                return "h-8 px-3 text-sm";
            case "lg":
                return "h-12 px-6 text-lg";
            default:
                return "h-10 px-4 text-base";
        }
    };
    return (_jsx(motion.button, { ref: ref, className: `inline-flex items-center justify-center rounded-lg font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${getVariantStyles()} ${getSizeStyles()} ${className}`, onClick: handleClick, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, ...props, children: _jsx(AnimatePresence, { mode: "wait", children: isSubscribed ? (_jsxs(motion.span, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: [action === "subscribe" && "Subscribed", action === "follow" && "Following", action === "like" && "Liked", action === "bookmark" && "Bookmarked", action === "download" && "Downloaded"] }, "subscribed")) : (_jsx(motion.span, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: children }, "action")) }) }));
});
AnimatedSubscribeButton.displayName = "AnimatedSubscribeButton";