wgm-swap-components
Version:
A React component library for token swap interfaces
25 lines (24 loc) • 2.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Swap Button Component
*/
export var SwapButton = function (_a) {
var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, onClick = _a.onClick, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.fullWidth, fullWidth = _g === void 0 ? false : _g;
var baseStyles = 'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 relative overflow-hidden';
var variantStyles = {
primary: 'bg-black text-white hover:bg-gray-800 focus:ring-black shadow-lg hover:shadow-xl',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
success: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-lg hover:shadow-xl',
warning: 'bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500 shadow-lg hover:shadow-xl',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-lg hover:shadow-xl',
};
var sizeStyles = {
small: 'px-2 py-2 text-sm',
medium: 'px-4 py-3 text-base',
large: 'px-4 py-4 text-lg',
};
var widthStyles = fullWidth ? 'w-full' : '';
var buttonClasses = "\n ".concat(baseStyles, " \n ").concat(sizeStyles[size], " \n ").concat(widthStyles, " \n ").concat(className, "\n ").concat(disabled || loading ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : variantStyles[variant], "\n ").trim();
return (_jsxs("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled || loading, children: [loading && (_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), children] }));
};
export default SwapButton;