Merge pull request #28 from jackyzha0/save-png

save as png

1 files changed, 49 insertions, 24 deletions

diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index ea4981c..b63eedb 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom';
 import { ThemeInput } from './Inputs'
+import { exportComponentAsJPEG } from "react-component-export-image";
 
 const Bold = styled.span`
     font-weight: 700
@@ -9,14 +10,13 @@ const Bold = styled.span`
 
 const StyledDiv = styled.div`
     display: inline-block;
+    margin: 2em 0;
 `
 
 const Button = styled.button`
-    margin-left: 0 !important;
-`
-
-const ButtonRow = styled.div`
-    display: inline;
+    margin-right: 0 !important;
+    margin-left: 2em !important;
+    height: calc(16px + 1.6em + 2px);
 `
 
 const SpacedText = styled.span`
@@ -32,38 +32,63 @@ const Flex = styled.div`
 
 const PasteInfo = (props) => {
     const history = useHistory();
-    const redir = () => {
+    const redirRaw = () => {
         const redirUrl = `/raw/${props.hash}`
         history.push(redirUrl);
     }
 
+    const redirRender = () => {
+        const redirUrl = `/render/${props.hash}`
+        history.push(redirUrl);
+    }
+
+    const renderable = () => {
+        if (props.lang === 'latex') {
+            return (
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={redirRender}
+                >
+                    render
+                </Button>
+            );
+        }
+    }
+
     return (
         <div>
             <Flex>
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={redirRaw}
+                >
+                    view raw
+                </Button>
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={() => exportComponentAsJPEG(props.compref, `paste-${props.hash}.png`)}
+                >
+                    save
+                </Button>
+                {renderable()}
                 <ThemeInput
                     value={props.theme}
                     onChange={props.onChange}
                     id="themeInput" />
             </Flex>
             <StyledDiv>
-                <ButtonRow>
-                    <Button 
-                        className="lt-shadow lt-hover" 
-                        type="button"
-                        onClick={redir}
-                        >
-                        view raw
-                    </Button>
-                    <SpacedText>
-                        <Bold>language:&nbsp;</Bold>{props.lang}
-                    </SpacedText>
-                    <SpacedText>
-                        <Bold>expires:&nbsp;</Bold>{props.expiry}
-                    </SpacedText>
-                    <SpacedText>
-                        {props.err}
-                    </SpacedText>
-                </ButtonRow>
+                <SpacedText>
+                    <Bold>language:&nbsp;</Bold>{props.lang}
+                </SpacedText>
+                <SpacedText>
+                    <Bold>expires:&nbsp;</Bold>{props.expiry}
+                </SpacedText>
+                <SpacedText>
+                    {props.err}
+                </SpacedText>
             </StyledDiv>
         </div>
     );