And adding style to GenCode

This commit is contained in:
Sebastien Dionne 2023-12-12 19:54:27 -05:00
parent c2c2ef6e2b
commit f8ff305cf4
2 changed files with 35 additions and 10 deletions

View File

@ -0,0 +1,20 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
position: relative;
.copy-to-clipboard {
position: absolute;
cursor: pointer;
top: 0px;
right: 0px;
z-index: 10;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
`;
export default StyledWrapper;

View File

@ -2,6 +2,7 @@ import CodeEditor from 'components/CodeEditor/index';
import get from 'lodash/get'; import get from 'lodash/get';
import { HTTPSnippet } from 'httpsnippet'; import { HTTPSnippet } from 'httpsnippet';
import { useTheme } from 'providers/Theme/index'; import { useTheme } from 'providers/Theme/index';
import StyledWrapper from './StyledWrapper';
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 { CopyToClipboard } from 'react-copy-to-clipboard';
@ -24,11 +25,14 @@ const CodeView = ({ language, item }) => {
return ( return (
<> <>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}> <StyledWrapper>
<CopyToClipboard text={snippet} onCopy={() => toast.success('Copied to clipboard!')}> <CopyToClipboard
className="copy-to-clipboard"
text={snippet}
onCopy={() => toast.success('Copied to clipboard!')}
>
<IconCopy size={25} strokeWidth={1.5} /> <IconCopy size={25} strokeWidth={1.5} />
</CopyToClipboard> </CopyToClipboard>
</div>
<CodeEditor <CodeEditor
readOnly readOnly
value={snippet} value={snippet}
@ -36,6 +40,7 @@ const CodeView = ({ language, item }) => {
theme={storedTheme} theme={storedTheme}
mode={lang} mode={lang}
/> />
</StyledWrapper>
</> </>
); );
}; };