aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/About.tsx86
-rw-r--r--src/Grid.tsx17
-rw-r--r--src/Snow.tsx26
-rw-r--r--src/index.html17
-rw-r--r--src/index.tsx149
-rw-r--r--src/theme.ts18
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,
+ }
+});