@optic7409/resolvo-analytics/dist/react/components/TrackingButton.js

Simplified analytics client library for Next.js with automatic SSR handling, one-line integration, and comprehensive tracking

import { jsx as _jsx } from "react/jsx-runtime";
import { useAnalytics } from '../hooks/useAnalytics';
export function TrackingButton({ trackingEvent, trackingProperties, variant = 'primary', size = 'md', onClick, className = '', children, ...props }) {
    const { track } = useAnalytics();
    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
    const variantClasses = {
        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
        secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
        outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500',
        ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500'
    };
    const sizeClasses = {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm',
        lg: 'px-6 py-3 text-base'
    };
    const handleClick = async (event) => {
        // Track the event if specified
        if (trackingEvent) {
            await track(trackingEvent, {
                buttonText: typeof children === 'string' ? children : 'Button clicked',
                variant,
                size,
                ...trackingProperties
            });
        }
        // Call the original onClick handler
        if (onClick) {
            onClick(event);
        }
    };
    const combinedClassName = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim();
    return (_jsx("button", { className: combinedClassName, onClick: handleClick, ...props, children: children }));
}