52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
|
import { ContentCopy } from '@mui/icons-material/'
|
||
|
|
import { Box, IconButton, Typography } from '@mui/material'
|
||
|
|
import { toast } from 'react-toastify'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
textToCopy: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CopyToClipboard = ({ textToCopy }: Props) => {
|
||
|
|
const handleCopyClick = () => {
|
||
|
|
navigator.clipboard.writeText(textToCopy)
|
||
|
|
toast.success('Copied to clipboard', {
|
||
|
|
autoClose: 1000,
|
||
|
|
hideProgressBar: true
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
width: '100%'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
handleCopyClick()
|
||
|
|
}}
|
||
|
|
component="label"
|
||
|
|
sx={{
|
||
|
|
flex: '1',
|
||
|
|
overflow: 'auto',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
cursor: 'pointer'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{textToCopy}
|
||
|
|
</Typography>
|
||
|
|
<IconButton
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
handleCopyClick()
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ContentCopy />
|
||
|
|
</IconButton>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|