diff options
Diffstat (limited to 'src/lib/components')
| -rw-r--r-- | src/lib/components/ContentSection/ContentSection.js | 42 | ||||
| -rw-r--r-- | src/lib/components/Header/Header.js | 72 | ||||
| -rw-r--r-- | src/lib/components/SmartList/SmartList.js | 28 | ||||
| -rw-r--r-- | src/lib/components/Window/Window.js | 55 | ||||
| -rw-r--r-- | src/lib/components/Window/WindowSurface/WindowSurface.js | 33 |
5 files changed, 230 insertions, 0 deletions
diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js new file mode 100644 index 0000000..5108ce0 --- /dev/null +++ b/src/lib/components/ContentSection/ContentSection.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { + Typography, + Divider, + makeStyles +} from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + content: { + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& a': { + color: theme.palette.secondary.light, + }, + '& .MuiButton-root': { + color: theme.palette.background.paper, + margin: theme.spacing(1, 2, 2, 0), + fontWeight: 'bold', + }, + }, +})); + +const ContentSection = ({ sectionName, children }) => { + const classes = useStyles(); + + return ( + <> + <Typography variant="h4">{sectionName}</Typography> + <Divider variant="middle"/> + <Typography component="div" className={classes.content}> + {children} + </Typography> + </> + ); + +}; + + +export default ContentSection; diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js new file mode 100644 index 0000000..1595141 --- /dev/null +++ b/src/lib/components/Header/Header.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + + +const useStyles = makeStyles(theme => ({ + logo: { + color: theme.palette.secondary.main, + margin: theme.spacing(0, 3, 0, 3), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header = ({ page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + const icons = { + app: (<TimerIcon />), + profile: (<AccountCircleIcon />), + scoreboard: (<AssignmentIcon />), + contribute: (<GitHubIcon />), + }; + + return ( + <AppBar position="sticky"> + <Toolbar> + <Typography variant="h4" className={classes.logo}> + ChronoCube + </Typography> + <Tabs onChange={handleChange} value={page}> + { Object.keys(icons).map(item => ( + <Tab + label={item} + icon={icons[item]} + value={item} + className={classes.tab} + key={item} + /> + ))} + </Tabs> + </Toolbar> + </AppBar> + ); +}; + +export default Header; diff --git a/src/lib/components/SmartList/SmartList.js b/src/lib/components/SmartList/SmartList.js new file mode 100644 index 0000000..b462c47 --- /dev/null +++ b/src/lib/components/SmartList/SmartList.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; + + +const SmartList = ({ itemSize, itemCount, renderItem }) => { + + return ( + <div style={{ flex: '1 1 auto', overflow: 'hidden' }}> + <AutoSizer> + {({ width, height }) => ( + <FixedSizeList + height={height} + width={width} + itemSize={itemSize} + itemCount={itemCount} + > + {renderItem} + </FixedSizeList> + )} + </AutoSizer> + </div> + ); +}; + + +export default SmartList; diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js new file mode 100644 index 0000000..0ba2454 --- /dev/null +++ b/src/lib/components/Window/Window.js @@ -0,0 +1,55 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface/WindowSurface'; + + +const useStyles = makeStyles(theme => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation, + }, +})); + + +const Window = ({ type, name, children }) => { + const classes = useStyles(); + + const size = { + height: '85vh', + }; + + const position = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + <WindowSurface + size={size} + position={position} + > + {name && + <div> + <Typography variant="h5" className={classes.header}>{name}</Typography> + <Divider /> + </div> + } + {children} + </WindowSurface> + ); +}; + + +export default Window; diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js new file mode 100644 index 0000000..26fea01 --- /dev/null +++ b/src/lib/components/Window/WindowSurface/WindowSurface.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Paper, makeStyles } from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + background: theme.palette.background.elevation, + overflowY: 'auto', + scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, + } +})); + + +const WindowSurface = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + <Paper + elevation={3} + style={{...size, ...position}} + className={classes.surface} + > + {children} + </Paper> + ) +}; + + +export default WindowSurface;
\ No newline at end of file |