@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
55 lines (52 loc) • 1.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { css } from "styled-components";
import styled from "../../../styles/styled";
import Button from "../Button";
import CopyToClipboardIcon from "./CopyToClipboardIcon";
const Container = styled.div `
--color: var(--ck-copytoclipboard-stroke);
--bg: var(--ck-body-background);
transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
gap: 8px;
${(props) => props.$disabled
? css `
cursor: not-allowed;
opacity: 0.4;
`
: css `
&:hover {
--color: var(--ck-body-color-muted);
}
`}
`;
const CopyToClipboard = ({ text, children, variant, }) => {
const [clipboard, setClipboard] = useState(false);
const onCopy = async () => {
if (!text)
return;
if (typeof navigator !== "undefined" && navigator.clipboard) {
await navigator.clipboard.writeText(text);
}
else {
const input = document.createElement("input");
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
}
setClipboard(true);
setTimeout(() => setClipboard(false), 1000);
};
if (variant === "button") {
return (_jsx(Button, { disabled: !text, onClick: onCopy, "aria-label": clipboard ? "Copied" : "Copy to clipboard", icon: _jsx(CopyToClipboardIcon, { copied: clipboard }), children: children }));
}
return (_jsxs(Container, { onClick: onCopy, "$disabled": !text, children: [_jsx(CopyToClipboardIcon, { copied: clipboard, dark: true }), children] }));
};
export default CopyToClipboard;