@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
39 lines (36 loc) • 3.36 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { AnimatePresence } from 'framer-motion';
import { flattenChildren } from '../../../utils/index.js';
import FitText from '../FitText/index.js';
import { Spinner } from '../Spinner/index.js';
import { ButtonContainer, ButtonContainerInner, IconContainer, DownloadArrow, DownloadArrowInner, Arrow, ArrowLine, ArrowChevron, InnerContainer, SpinnerContainer } from './styles.js';
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 || null, 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 { Button as default };
//# sourceMappingURL=index.js.map