aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-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>
);