diff options
| -rw-r--r-- | package.json | 13 | ||||
| -rw-r--r-- | public/index.html | 10 | ||||
| -rw-r--r-- | src/index.js | 75 | ||||
| -rw-r--r-- | src/lib/assets/icon.png | bin | 0 -> 10550 bytes | |||
| -rw-r--r-- | src/lib/assets/icon2.svg | 8 |
5 files changed, 106 insertions, 0 deletions
diff --git a/package.json b/package.json index 0dbdcbc..a87fee1 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "dist/index.js", "module": "dist/index.js", "scripts": { + "start": "react-scripts start", "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files" }, "license": "MIT", @@ -23,5 +24,17 @@ "@babel/core": "^7.8.3", "@babel/preset-react": "^7.8.3", "eslint": "^6.8.0" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..89309e0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title> BENZIN preview </title> + </head> + <body> + <noscript>You need to enable JavaScript to run this app.</noscript> + <div id="root"></div> + </body> +</html> diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..295f17e --- /dev/null +++ b/src/index.js @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom'; + +import { CssBaseline, makeStyles, Button } from '@material-ui/core'; + +import { + BenzinThemeProvider, + Header, + Window, + ContentSection, +} from './lib'; + +import icon from './lib/assets/icon.png'; +import icon2 from './lib/assets/icon2.svg'; +import HomeIcon from '@material-ui/icons/Home'; +import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite'; +import ExploreIcon from '@material-ui/icons/Explore'; +import GitHubIcon from '@material-ui/icons/GitHub'; + + + + + +const useStyles = makeStyles(theme => ({ + window: { + padding: theme.spacing(4), + } +})); + +const headerContents = { + home: <HomeIcon />, + 'getting started': <PlayCircleFilledWhiteIcon />, + explore: <ExploreIcon />, + contribute: <GitHubIcon />, +} + +const Icon1 = <img src={icon} width="40px" height="46.25px" alt="logo"/> +const Icon2 = <img src={icon2} height="32px" alt="logo"/> + +const App = () => { + const classes = useStyles(); + const [page, setPage] = useState('home'); + + return ( + <BenzinThemeProvider> + <CssBaseline /> + <Header + logo={{ + icon: Icon1, + title: 'BENZIN', + }} + contents={headerContents} + page={page} + setPage={setPage} + /> + <Window type="mono"> + <div className={classes.window}> + <ContentSection sectionName="Out of fuel? You've came to the right place!"> + <p> Here is some text about BENZIN library. </p> + <Button variant="contained" color="secondary"> + Charge me up! + </Button> + <Button variant="contained" color="primary"> + Learn more + </Button> + </ContentSection> + </div> + </Window> + </BenzinThemeProvider> + ); +}; + + +ReactDOM.render(<App />, document.getElementById('root')); + diff --git a/src/lib/assets/icon.png b/src/lib/assets/icon.png Binary files differnew file mode 100644 index 0000000..4335637 --- /dev/null +++ b/src/lib/assets/icon.png diff --git a/src/lib/assets/icon2.svg b/src/lib/assets/icon2.svg new file mode 100644 index 0000000..9c4da7f --- /dev/null +++ b/src/lib/assets/icon2.svg @@ -0,0 +1,8 @@ +<svg width="35" height="46" viewBox="0 0 35 46" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15 1H32C33.1046 1 34 1.89543 34 3V43C34 44.1046 33.1046 45 32 45H3C1.89543 45 1 44.1046 1 43V15C1 7.26801 7.26801 1 15 1Z" stroke="#FFA726" stroke-width="2"/> +<rect x="20.5" y="5.5" width="9" height="1" rx="0.5" stroke="#FFA726"/> +<rect x="1.21947" y="5.65685" width="6.27542" height="1.72458" transform="rotate(-45 1.21947 5.65685)" stroke="#FFA726" stroke-width="1.72458"/> +<circle cx="24" cy="25" r="5" fill="#FFA726"/> +<circle cx="14" cy="31" r="5" fill="#FFA726"/> +<circle cx="14" cy="19" r="5" fill="#FFA726"/> +</svg> |
