feat: add copy code feature

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>
 );