@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
72 lines (69 loc) • 2.01 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) !important;
--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, }) => (jsx(IconContainer, { "$clipboard": copied, children: 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