@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
79 lines (76 loc) • 2.03 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
import { css } from 'styled-components';
import styled from '../../../styles/styled/index.js';
import { CopyToClipboardIcon as CopyToClipboardIcon$1 } from '../../../assets/icons.js';
const IconContainer = styled(motion.div)`
transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
display: flex;
align-items: center;
justify-content: center;
width: 16px;
svg {
display: block;
}
svg,
svg path,
svg rect {
transition: inherit;
}
svg path:first-child {
transform-origin: 50% 50%;
fill: var(--bg);
stroke: var(--color);
}
svg rect {
transform-origin: 53% 63%;
fill: var(--bg);
stroke: var(--color);
}
svg path:last-child {
opacity: 0;
stroke: var(--bg);
transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);
}
${(props) => props.$clipboard ? css`
--color: var(--ck-focus-color) ;
--bg: var(--ck-body-background);
svg {
transition-delay: 0ms;
path:first-child {
opacity: 0;
transform: rotate(-90deg) scale(0.2);
}
rect {
rx: 10px;
fill: var(--color);
transform: rotate(-90deg) scale(1.45);
}
path:last-child {
transition-delay: 100ms;
opacity: 1;
transform: translate(7.75px, 9.5px);
}
}
` : css`
&:hover {
}
&:hover:active {
}
`}
`;
const CopyToClipboardIcon = ({
copied,
small,
dark
}) => /* @__PURE__ */ jsx(IconContainer, { $clipboard: copied, children: /* @__PURE__ */ jsx(
CopyToClipboardIcon$1,
{
style: {
transform: small ? "scale(1)" : "translateX(3px) scale(1.5)",
opacity: small || copied || dark ? 1 : 0.3
}
}
) });
export { CopyToClipboardIcon as default };
//# sourceMappingURL=CopyToClipboardIcon.js.map