53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
import CheckIcon from '@mui/icons-material/Check';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import { Tooltip } from '@mui/material';
|
|
import { SxProps, Theme } from '@mui/material';
|
|
|
|
interface CopyBubbleProps {
|
|
content: string | undefined,
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
const CopyBubble = ({
|
|
content,
|
|
sx,
|
|
} : CopyBubbleProps) => {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = () => {
|
|
if (content === undefined) {
|
|
return;
|
|
}
|
|
|
|
navigator.clipboard.writeText(content.trim()).then(() => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Tooltip title="Copy to clipboard" placement="top" arrow>
|
|
<IconButton
|
|
onClick={handleCopy}
|
|
sx={{
|
|
width: 24,
|
|
height: 24,
|
|
opacity: 0.75,
|
|
bgcolor: 'background.paper',
|
|
'&:hover': { bgcolor: 'action.hover', opacity: 1 },
|
|
...sx,
|
|
}}
|
|
size="small"
|
|
color={copied ? "success" : "default"}
|
|
>
|
|
{copied ? <CheckIcon sx={{ width: 16, height: 16 }} /> : <ContentCopyIcon sx={{ width: 16, height: 16 }} />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export {
|
|
CopyBubble
|
|
} |