feat: add custom md preview page

1 files changed, 65 insertions, 10 deletions

diff --git a/src/index.tsx b/src/index.tsx
index b64b207..60453eb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, TextField, Button } from '@material-ui/core';
 
 import {
   Benzin,
   Header,
   Window,
   Markdown,
+  ContentSection,
 } from './lib';
 
 import icon from './assets/icon.svg';
@@ -21,6 +22,11 @@ interface RenderPropTypes {
 const useStyles = makeStyles(theme => ({
   window: {
     padding: theme.spacing(4),
+  },
+  promoButton: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: theme.spacing(4),
   }
 }));
 
@@ -29,29 +35,63 @@ const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
 
 const headerContents = {
   home: null,
-  space: null,
   'spacevim': null,
-  'emoji': null,
   'material-ui': null,
+  'custom': null,
 };
 
 const pageMap: Record<string, string> = {
   home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',
-  space: 'https://raw.githubusercontent.com/eug-vs/space/master/docs/environment.md',
   'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
-  emoji: 'https://raw.githubusercontent.com/muan/emoji/gh-pages/README.md',
   'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',
 };
 
 
+const CustomPage: React.FC = () => {
+  const [url, setUrl] = useState<string>('');
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const handleParseUrl = () => {
+    setUrl(inputEl.current?.value || '');
+  }
+
+  return (
+    <>
+      <ContentSection sectionName="Render custom markdown document" level={2} >
+        <p>
+          This should be a link to a valid markdown file. Response should give the file contents.
+          If you copy README file from GitHub, make sure you provide link to raw view.
+        </p>
+        <p>
+          <TextField
+            inputRef={inputEl}
+            variant="outlined"
+            color="secondary"
+            label="Markdown url"
+          />
+        </p>
+        <Button variant="contained" color="secondary" onClick={handleParseUrl} >
+          Render!
+        </Button>
+      </ContentSection>
+      <Markdown url={url} />
+    </>
+  );
+}
+
+
 const App: React.FC = () => {
   const classes = useStyles();
-  const [page, setPage] = useState('home');
+  const [page, setPage] = useState<string>('home');
+
+  const handleGoCustom = () => {
+    setPage('custom');
+  }
 
   const url = pageMap[page];
-  const fileName = url.slice(url.lastIndexOf('/') + 1);
+  const fileName = url?.slice(url.lastIndexOf('/') + 1);
   const metadata = [
-    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and processed by **BENZIN**! :rocket:`,
+    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
     'Switch between tabs on the header to explore other markdown templates. :recycle: ',
     'Currently **only core features** of markdown function.',
     'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
@@ -76,12 +116,27 @@ const App: React.FC = () => {
       />
       <Window type="primary">
         <div className={classes.window}>
-          <Markdown url={url} />
+          {
+            (page === 'custom') ?
+            <CustomPage />
+            :
+            <Markdown url={url} />
+          }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
           <Markdown data={metadata} />
+          <p className={classes.promoButton}>
+            <Button
+              variant="contained"
+              color="primary"
+              size="large"
+              onClick={handleGoCustom}
+            >
+              Render custom document
+            </Button>
+          </p>
         </div>
       </Window>
     </Benzin>