diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/About.tsx | 86 | ||||
| -rw-r--r-- | src/Grid.tsx | 17 | ||||
| -rw-r--r-- | src/Snow.tsx | 26 | ||||
| -rw-r--r-- | src/index.html | 17 | ||||
| -rw-r--r-- | src/index.tsx | 149 | ||||
| -rw-r--r-- | src/theme.ts | 18 |
6 files changed, 313 insertions, 0 deletions
diff --git a/src/About.tsx b/src/About.tsx new file mode 100644 index 0000000..9aae40c --- /dev/null +++ b/src/About.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { Theme, withStyles, StyleRules } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Link from '@material-ui/core/Link'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; + +const styles = (theme: Theme): StyleRules => ({ + infoField: { + fontWeight: theme.typography.fontWeightMedium, + paddingRight: 14, + }, + body: { + margin: '0 auto', + width: 800, + fontSize: 16 + }, + pre: { + fontFamily: "Monospace" + } +}); + +type AboutProps = { + classes: { + infoField: string, + body: string, + pre: string + } +}; + +function About(props: AboutProps) { + const { classes } = props; + return ( + <div className={classes.body}> + <article> + The MIT License (MIT) + <p>Copyright 2019 Maofan "Ted" Yin</p> + + <p>Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions:</p> + + <p>The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software.</p> + + <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE.</p> + </article> + <List disablePadding> + <ListItem> + <span className={classes.infoField}>Email:</span> + 73d at tedyin dot com + </ListItem> + <ListItem> + <span className={classes.infoField}>GitHub:</span> + <Link href="https://github.com/Determinant/chromicle" target="_blank" rel="noopener"> + Determinant/chromicle + </Link> + </ListItem> + <ListItem> + <span className={classes.infoField}>About Me:</span> + <Link href="https://www.cs.cornell.edu/~tedyin/" target="_blank" rel="noopener"> + https://www.cs.cornell.edu/~tedyin/ + </Link> + </ListItem> + <ListItem> + <span className={classes.infoField}>Buy me a cup of coffee:</span> + <List className={classes.pre} disablePadding> + <ListItem>Ether: 0xFEeed0f0BA87824819aabfa789f41FA2dd9ad81e</ListItem> + <ListItem>Bitcoin: 1CbVBB6Gv7WP4u39wsN416SJrjmvQDjggw</ListItem> + </List> + </ListItem> + </List> + </div> + ); +} + +export default withStyles(styles)(About); diff --git a/src/Grid.tsx b/src/Grid.tsx new file mode 100644 index 0000000..65cf2ec --- /dev/null +++ b/src/Grid.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import 'typeface-roboto'; +import MGrid from '@material-ui/core/Grid'; + + +interface GridProps { + classes: {} +} + +class Grid extends React.Component<GridProps> { + render() { + const { classes } = this.props; + return (<div></div>); + } +} + +export default Grid; diff --git a/src/Snow.tsx b/src/Snow.tsx new file mode 100644 index 0000000..47a1c06 --- /dev/null +++ b/src/Snow.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import MGrid from '@material-ui/core/Grid'; +import { Theme, withStyles } from '@material-ui/core/styles'; + +interface SnowProps { + classes: {} +} + +const styles = (theme: Theme) => ({ + buttonSpacer: { + marginBottom: theme.spacing.unit * 4, + }, +}); + +class Snow extends React.Component<SnowProps> { + render() { + const { classes } = this.props; + + return ( + <MGrid container spacing={16} style={{minWidth: 700}}> + </MGrid> + ); + } +} + +export default withStyles(styles)(Snow); diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..a51779c --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, shrink-to-fit=no" + /> + <meta name="theme-color" content="#000000" /> + <link rel="stylesheet" href="/fonts/TypoPRO-FantasqueSansMono-Regular.css" /> + <title>Chromicle</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.tsx b/src/index.tsx new file mode 100644 index 0000000..da751ca --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import 'typeface-roboto'; +import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Tabs from '@material-ui/core/Tabs'; +import Tab, { TabProps } from '@material-ui/core/Tab'; +import { LinkProps } from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; +import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; + +import { theme } from './theme'; +import Snow from './Snow'; +import About from './About'; + +const styles = (theme: Theme) => ({ + root: { + display: 'flex', + height: '100vh', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + title: { + flexGrow: 1, + display: 'inline-block' + }, + appBarSpacer: theme.mixins.toolbar, + contentWrapper: { + position: 'relative' as 'relative', + flexGrow: 1, + padding: theme.spacing.unit * 3, + overflow: 'auto', + }, + content: { + position: 'absolute' as 'absolute', + left: theme.spacing.unit * 3, + right: theme.spacing.unit * 3, + paddingBottom: theme.spacing.unit * 3, + }, + indicator: { + backgroundColor: theme.palette.primary.contrastText + }, + fadeEnter: { + opacity: 0.001 + }, + fadeEnterActive: { + opacity: 1, + transition: 'opacity 300ms ease-in' + }, + fadeExit: { + opacity: 1 + }, + fadeExitActive: { + opacity: 0.001, + transition: 'opacity 300ms ease-in' + } +}); + +interface MainTabsProps extends RouteComponentProps { + classes: { + root: string, + appBar: string, + appBarSpacer: string, + toolbar: string, + title: string, + indicator: string, + content: string, + contentWrapper: string, + fadeEnter: string, + fadeEnterActive: string, + fadeExit: string, + fadeExitActive: string, + } +} + +class MainTabs extends React.Component<MainTabsProps> { + handleChangeTab = (event: React.SyntheticEvent<{}>, currentTab: any) => { + this.props.history.push(currentTab); + } + + render() { + const { classes, location } = this.props; + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classes.appBar}> + <Toolbar className={classes.toolbar}> + <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}> + Snow + </Typography> + <Tabs + classes={{ indicator: classes.indicator }} + value={this.props.history.location.pathname} + onChange={this.handleChangeTab}> + <Tab label="Snow" {...{component: Link, to: "/snow"} as any} value="/snow" /> + <Tab label="About" {...{component: Link, to: "/about"} as any} value="/about" /> + </Tabs> + </Toolbar> + </AppBar> + <CssBaseline /> + <main className={classes.contentWrapper}> + <div className={classes.appBarSpacer} /> + <TransitionGroup> + <CSSTransition + key={location.pathname} + timeout={{ enter: 300, exit: 300 }} + classNames={{ + enter: classes.fadeEnter, + enterActive: classes.fadeEnterActive, + exit: classes.fadeExit, + exitActive: classes.fadeExitActive + }}> + <div className={classes.content}> + <Switch location={location}> + {console.log(location)} + <Route exact path="/snow" component={Snow} /> + <Route exact path="/about" component={About} /> + <Route exact path="/" render={() => <Redirect to="/settings" />}/> + </Switch> + </div> + </CSSTransition> + </TransitionGroup> + </main> + </div> + ); + } +} + +class Main extends React.Component { + render() { + let Tabs = withRouter(withStyles(styles)(MainTabs)); + return ( + <MuiThemeProvider theme={theme}> + <Router><Tabs /></Router> + </MuiThemeProvider>); + } +} + +ReactDOM.render(<Main />, document.getElementById('root')); diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000..0269fd3 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,18 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import orange from '@material-ui/core/colors/orange'; +import deepOrange from '@material-ui/core/colors/deepOrange'; + +export const defaultChartColor = deepOrange[300]; +export const theme = createMuiTheme({ + palette: { + primary: { + light: orange[300], + main: orange[500], + dark: orange[700], + contrastText: "#fff" + } + }, + typography: { + useNextVariants: true, + } +}); |