Add copy to clipboard icon

This commit is contained in:
Sebastien Dionne 2023-12-10 15:12:04 -05:00
parent 8ddec6bf0c
commit 89c5fc2f03
2 changed files with 19 additions and 7 deletions

View File

@ -55,6 +55,7 @@
"qs": "^6.11.0", "qs": "^6.11.0",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "18.2.0", "react": "18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0", "react-dom": "18.2.0",

View File

@ -4,6 +4,10 @@ import { HTTPSnippet } from 'httpsnippet';
import { useTheme } from 'providers/Theme/index'; import { useTheme } from 'providers/Theme/index';
import { buildHarRequest } from 'utils/codegenerator/har'; import { buildHarRequest } from 'utils/codegenerator/har';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import toast from 'react-hot-toast';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCopy } from '@fortawesome/free-solid-svg-icons';
const CodeView = ({ language, item }) => { const CodeView = ({ language, item }) => {
const { storedTheme } = useTheme(); const { storedTheme } = useTheme();
@ -20,6 +24,12 @@ const CodeView = ({ language, item }) => {
} }
return ( return (
<>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<CopyToClipboard text={snippet} onCopy={() => toast.success('Copied to clipboard!')}>
<FontAwesomeIcon icon={faCopy} style={{ cursor: 'pointer' }} />
</CopyToClipboard>
</div>
<CodeEditor <CodeEditor
readOnly readOnly
value={snippet} value={snippet}
@ -27,6 +37,7 @@ const CodeView = ({ language, item }) => {
theme={storedTheme} theme={storedTheme}
mode={lang} mode={lang}
/> />
</>
); );
}; };