aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-05 06:30:31 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 19:06:35 +0800
commit2d6c46b83c67401fcae01e2e98e9755463a3c71a (patch)
treeb383d0a0bce227770664cd12d457418db2fd1e91
parent6f5787b2c43957c1c5db5a6123399e8baeb0ed78 (diff)
downloaddexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar.gz
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar.bz2
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar.lz
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar.xz
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.tar.zst
dexon-sol-tools-2d6c46b83c67401fcae01e2e98e9755463a3c71a.zip
feat: add copy code feature
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx20
2 files changed, 18 insertions, 3 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index c2ae9ad9c..ae00851e5 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -44,6 +44,7 @@ export interface ContainerProps {
right?: string;
bottom?: string;
zIndex?: number;
+ float?: 'right' | 'left';
Tag?: ContainerTag;
cursor?: string;
id?: string;
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4fe1928f5..9a04fceed 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,5 +1,10 @@
import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
import SyntaxHighlighter from 'react-syntax-highlighter';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
@@ -142,7 +147,16 @@ export interface CodeDemoProps {
}
export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
- <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
- {props.children}
- </SyntaxHighlighter>
+ <Container position="relative" height="100%">
+ <Container position="absolute" top="10px" right="10px">
+ <CopyToClipboard text={props.children}>
+ <Button fontSize="14px">
+ <b>Copy</b>
+ </Button>
+ </CopyToClipboard>
+ </Container>
+ <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+ {props.children}
+ </SyntaxHighlighter>
+ </Container>
);