diff options
Diffstat (limited to 'src/index.tsx')
| -rw-r--r-- | src/index.tsx | 137 |
1 files changed, 119 insertions, 18 deletions
diff --git a/src/index.tsx b/src/index.tsx index b64b207..c5e1989 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,37 +22,114 @@ interface RenderPropTypes { const useStyles = makeStyles(theme => ({ window: { padding: theme.spacing(4), - } + }, + promoButton: { + display: 'flex', + justifyContent: 'center', + marginTop: theme.spacing(4), + }, })); -const Icon = <img src={icon} width="32px" height="37px" alt="logo"/> +const Icon = <img src={icon} width="32px" height="37px" alt="logo" />; const headerContents = { home: null, - space: null, - 'spacevim': null, - 'emoji': null, + spacevim: 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', + spacevim: 'https://raw.githubusercontent.com/spacevim/spacevim/master/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 = [ + /* eslint-disable max-len */ + `## 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:', @@ -61,8 +139,15 @@ const App: React.FC = () => { 'const data = \'# Header\\nHello, *world!*\';', 'ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));', '```', + /* eslint-enable max-len */ ].join('\n'); + let primaryWindowContent = <Markdown url={url} />; + if (page === 'custom') primaryWindowContent = <CustomPage />; + else if (page === 'live preview') { + primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />; + } + return ( <Benzin> <Header @@ -75,13 +160,29 @@ const App: React.FC = () => { setPage={setPage} /> <Window type="primary"> - <div className={classes.window}> - <Markdown url={url} /> - </div> + <div className={classes.window}>{primaryWindowContent}</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> |