add copy button to tranbox

This commit is contained in:
Gabe Yuan
2023-10-26 12:24:24 +08:00
parent 0d7112187d
commit c6d3d6454f
5 changed files with 81 additions and 2 deletions

View File

@@ -0,0 +1,35 @@
import IconButton from "@mui/material/IconButton";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import LibraryAddCheckIcon from "@mui/icons-material/LibraryAddCheck";
import { useState } from "react";
export default function CopyBtn({ text }) {
const [copied, setCopied] = useState(false);
const handleClick = (e) => {
e.stopPropagation();
navigator.clipboard.writeText(text);
setCopied(true);
const timer = setTimeout(() => {
clearTimeout(timer);
setCopied(false);
}, 500);
};
return (
<IconButton
size="small"
sx={{
opacity: 0.5,
"&:hover": {
opacity: 1,
},
}}
onClick={handleClick}
>
{copied ? (
<LibraryAddCheckIcon fontSize="inherit" />
) : (
<ContentCopyIcon fontSize="inherit" />
)}
</IconButton>
);
}