1 files changed, 177 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
new file mode 100644
index 000000000..1bc1980e7
--- /dev/null
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -0,0 +1,177 @@
+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 { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
+
+const CustomPre = styled.pre`
+    margin: 0px;
+    line-height: 24px;
+    overflow: scroll;
+    width: 600px;
+    height: 100%;
+    max-height: 800px;
+    border-radius: 4px;
+    code {
+        background-color: inherit !important;
+        border-radius: 0px;
+        font-family: 'Roboto Mono', sans-serif;
+        border: none;
+    }
+    code:first-of-type {
+        background-color: #2a2a2a !important;
+        color: #999;
+        min-height: 98%;
+        text-align: center;
+        padding-right: 5px !important;
+        padding-left: 5px;
+        margin-right: 15px;
+        line-height: 25px;
+        padding-top: 10px;
+    }
+    code:last-of-type {
+        position: relative;
+        top: 10px;
+    }
+`;
+
+const customStyle = {
+    'hljs-comment': {
+        color: '#7e7887',
+    },
+    'hljs-quote': {
+        color: '#7e7887',
+    },
+    'hljs-variable': {
+        color: '#be4678',
+    },
+    'hljs-template-variable': {
+        color: '#be4678',
+    },
+    'hljs-attribute': {
+        color: '#be4678',
+    },
+    'hljs-regexp': {
+        color: '#be4678',
+    },
+    'hljs-link': {
+        color: '#be4678',
+    },
+    'hljs-tag': {
+        color: '#61f5ff',
+    },
+    'hljs-name': {
+        color: '#61f5ff',
+    },
+    'hljs-selector-id': {
+        color: '#be4678',
+    },
+    'hljs-selector-class': {
+        color: '#be4678',
+    },
+    'hljs-number': {
+        color: '#c994ff',
+    },
+    'hljs-meta': {
+        color: '#aa573c',
+    },
+    'hljs-built_in': {
+        color: '#aa573c',
+    },
+    'hljs-builtin-name': {
+        color: '#aa573c',
+    },
+    'hljs-literal': {
+        color: '#aa573c',
+    },
+    'hljs-type': {
+        color: '#aa573c',
+    },
+    'hljs-params': {
+        color: '#aa573c',
+    },
+    'hljs-string': {
+        color: '#bcff88',
+    },
+    'hljs-symbol': {
+        color: '#2a9292',
+    },
+    'hljs-bullet': {
+        color: '#2a9292',
+    },
+    'hljs-title': {
+        color: '#576ddb',
+    },
+    'hljs-section': {
+        color: '#576ddb',
+    },
+    'hljs-keyword': {
+        color: '#955ae7',
+    },
+    'hljs-selector-tag': {
+        color: '#955ae7',
+    },
+    'hljs-deletion': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#be4678',
+    },
+    'hljs-addition': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#2a9292',
+    },
+    hljs: {
+        display: 'block',
+        overflowX: 'hidden',
+        background: colors.instantSecondaryBackground,
+        color: 'white',
+        fontSize: '12px',
+    },
+    'hljs-emphasis': {
+        fontStyle: 'italic',
+    },
+    'hljs-strong': {
+        fontWeight: 'bold',
+    },
+};
+
+export interface CodeDemoProps {
+    children: string;
+}
+
+export interface CodeDemoState {
+    didCopyCode: boolean;
+}
+
+export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
+    public state: CodeDemoState = {
+        didCopyCode: false,
+    };
+    public render(): React.ReactNode {
+        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
+        return (
+            <Container position="relative" height="100%">
+                <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
+                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
+                        <Button fontSize="14px">
+                            <b>{copyButtonText}</b>
+                        </Button>
+                    </CopyToClipboard>
+                </Container>
+                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+                    {this.props.children}
+                </SyntaxHighlighter>
+            </Container>
+        );
+    }
+    private readonly _handleCopyClick = () => {
+        this.setState({ didCopyCode: true });
+    };
+}