@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
35 lines • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AnimatePresence } from "framer-motion";
import { flattenChildren } from "../../../utils";
import FitText from "../FitText";
import { Spinner } from "../Spinner";
import { Arrow, ArrowChevron, ArrowLine, ButtonContainer, ButtonContainerInner, DownloadArrow, DownloadArrowInner, IconContainer, InnerContainer, SpinnerContainer, } from "./styles";
const transition = {
duration: 0.4,
ease: [0.175, 0.885, 0.32, 0.98],
};
const Button = ({ children, variant = "secondary", // unique aspect to how we're handling buttons
disabled, icon, iconPosition = "left", roundedIcon, waiting, arrow, download, href, style, onClick, }) => {
const key = typeof children === "string" ? children : flattenChildren(children).join(""); // Need to generate a string for the key so we can automatically animate between content
const hrefUrl = typeof href === "string" ? href : flattenChildren(href).join(""); // Need to have a flat string for the href
return (_jsx(ButtonContainer, { as: href ? "a" : undefined, onClick: (event) => {
if (!disabled && onClick) {
onClick(event);
}
}, href: hrefUrl, target: href && "_blank", rel: href && "noopener noreferrer", disabled: disabled, "$variant": variant, style: style, children: _jsxs(AnimatePresence, { initial: false, children: [_jsxs(ButtonContainerInner, { initial: { opacity: 0, y: -10 }, animate: {
opacity: 1,
y: -1,
}, exit: {
position: "absolute",
opacity: 0,
y: 10,
transition: {
...transition,
},
}, transition: {
...transition,
delay: 0.2,
}, children: [icon && iconPosition === "left" && (_jsx(IconContainer, { "$rounded": roundedIcon, children: icon })), download && (_jsx(DownloadArrow, { children: _jsx(DownloadArrowInner, { children: _jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), _jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), _jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: _jsx(FitText, { children: children }) }), icon && iconPosition === "right" && (_jsx(IconContainer, { "$rounded": roundedIcon, children: icon })), arrow && (_jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), _jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (_jsx(SpinnerContainer, { children: _jsx(Spinner, {}) }))] }) }));
};
export default Button;
//# sourceMappingURL=index.js.map