/** * Copyright 2020, Verizon Media * Licensed under the terms of the MIT license. See LICENSE file in project root for terms. */ import React from 'react'; import ReactDOM from 'react-dom'; import { createGenerateClassName, StylesProvider, ThemeProvider } from '@material-ui/styles'; import { createMuiTheme } from '@material-ui/core/styles'; import { HashRouter, Route, Switch } from 'react-router-dom'; import Styled from './Styled'; import Home from './pages/Home'; import FormList from './pages/Form/List'; import FormEdit from './pages/Form/Edit'; import FieldList from './pages/Field/List'; import FieldEdit from './pages/Field/Edit'; const generateClassName = createGenerateClassName({ productionPrefix: 'jafar-react-editor' }); const theme = createMuiTheme({ palette: { primary: { main: '#F9970D', }, secondary: { main: '#828c93', }, }, }); const Root = () => { return ( <HashRouter basename="/"> <StylesProvider generateClassName={generateClassName}> <ThemeProvider theme={theme}> <Styled.GlobalStyle /> <Styled.Header> <Styled.InternalLink id="logo" to="/"> <Styled.Logo src={require('./jafar.svg')} /> <Styled.LogoText>Jafar | React Editor</Styled.LogoText> </Styled.InternalLink> <Styled.HeaderLinks> <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink> <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink> </Styled.HeaderLinks> </Styled.Header> <Styled.Main id="jafar-react-editor-demos"> <Switch> <Route exact={true} path="/" component={Home} /> <Route exact={true} path="/form/:id" component={FormEdit} /> <Route exact={true} path="/form/" component={FormList} /> <Route exact={true} path="/field/:id" component={FieldEdit} /> <Route exact={true} path="/field/" component={FieldList} /> </Switch> </Styled.Main> </ThemeProvider> </StylesProvider> </HashRouter> ); }; if (document.getElementById('root')) { ReactDOM.render(<Root />, document.getElementById('root')); if (module.hot) { module.hot.accept(); } } export default Root;