File size: 1,078 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import React from "react";
import { CopyToClipboardButton } from "./copy-to-clipboard-button";
export function CopyableContentWrapper({
text,
children,
}: {
text: string;
children: React.ReactNode;
}) {
const [isHovering, setIsHovering] = React.useState(false);
const [isCopied, setIsCopied] = React.useState(false);
const handleCopy = async () => {
await navigator.clipboard.writeText(text);
setIsCopied(true);
};
React.useEffect(() => {
let timeout: NodeJS.Timeout;
if (isCopied) {
timeout = setTimeout(() => setIsCopied(false), 2000);
}
return () => clearTimeout(timeout);
}, [isCopied]);
return (
<div
className="relative"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<div className="absolute top-2 right-2 z-10">
<CopyToClipboardButton
isHidden={!isHovering}
isDisabled={isCopied}
onClick={handleCopy}
mode={isCopied ? "copied" : "copy"}
/>
</div>
{children}
</div>
);
}
|