1 files changed, 113 insertions, 12 deletions

diff --git a/src/index.tsx b/src/index.tsx
index b64b207..a9a7012 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,99 @@ 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,
+  'live preview': 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 = (): void => {
+    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
+            fullWidth
+            inputRef={inputEl}
+            variant="outlined"
+            color="secondary"
+            label="Markdown url"
+          />
+        </p>
+        <Button variant="contained" color="secondary" onClick={handleParseUrl} >
+          Render!
+        </Button>
+      </ContentSection>
+      <Markdown url={url} />
+    </>
+  );
+}
+
+interface LivePropTypes {
+  setLivePreviewData: (livePreviewData: string) => void;
+}
+
+const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const handleRender = (): void => {
+    setLivePreviewData(inputEl.current?.value || '');
+  }
+
+  return (
+    <>
+      <ContentSection sectionName="Markdown live preview" level={2} >
+        <p>
+          Start typing and see your text rendered on the left window! We recommend starting with # Header.
+        </p>
+        <p>
+          <TextField
+            fullWidth
+            multiline
+            inputRef={inputEl}
+            variant="outlined"
+            color="primary"
+            label="Markdown"
+            onChange={handleRender}
+          />
+        </p>
+      </ContentSection>
+    </>
+  )
+}
+
+
 const App: React.FC = () => {
   const classes = useStyles();
-  const [page, setPage] = useState('home');
+  const [page, setPage] = useState<string>('home');
+  const [livePreviewData, setLivePreviewData] = useState<string>('');
+
+  const handleGoLivePreview = (): void => {
+    setPage('live preview');
+  }
 
   const url = pageMap[page];
-  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:`,
+  const fileName = url?.slice(url.lastIndexOf('/') + 1);
+  const info = [
+    `## 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 +152,37 @@ const App: React.FC = () => {
       />
       <Window type="primary">
         <div className={classes.window}>
-          <Markdown url={url} />
+          {
+            (page === 'custom') ?
+            <CustomPage />
+            :
+            (page === 'live preview') ?
+            <Markdown data={livePreviewData || '# Start typing in the right window!'} />
+            :
+            <Markdown url={url} />
+          }
         </div>
       </Window>
       <Window type="secondary" name="Feature preview">
         <div className={classes.window}>
-          <Markdown data={metadata} />
+          {
+            (page === 'live preview') ?
+            <LivePreviewPage setLivePreviewData={setLivePreviewData} />
+            :
+            <>
+              <Markdown data={info} />
+              <p className={classes.promoButton}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  onClick={handleGoLivePreview}
+                >
+                  Try it yourself!
+                </Button>
+              </p>
+            </>
+          }
         </div>
       </Window>
     </Benzin>